So You Want Another Image Flip, Huh?
[Let's Make It Work!]
Here's what I'm talking about...
It's a link right back to this page. Run your mouse pointer over it:
Here's an even more silly use for it:
Yes, that's me. Now stop writing and asking me if I look like the drawing. As you can see... I do. And it's a little disheartening.
What's On The ScreenWell, first off you have to make the images, or get them from somewhere. No, they don't really have to be alike. They really don't have to have anything to do with each other, but that always helps the user. Tell you what...I'll give you the two images above so you can make one of these deals right now.
I know they're out of numerical order. Don't worry about that right now.
Okay, first off -- you need the main script. This is the one that does most of the dirty work. Download it or copy and paste it and set it aside for now. You'll need to alter it for your needs later.
Now, for those of you following along at home: Once you have that script, paste it inside the <HEAD> and </HEAD> commands.
Now you need the second script that will place the images on your page and create the flipping effect. Here it is:
Again, for those of you playing along at home, place this second script inside the <BODY> section of your document. Where you place this is where the image will appear.
Let's Make It Work!
The First ScriptYou're smart people. You have to know by now that we intend to link these two things together. The script between the HEAD commands will do the work. The smaller script just places the image and reacts to the mouse. First we'll configure the script in the HEAD commands.
Look for this line:
object['OBJECTNAME']= new objectdata(WIDTH##, HEIGHT##, "IMAGE2.gif", "IMAGE1.gif","STATUS BAR TEXT");
Once you have found it, make some changes:
- Change OBJECTNAME with a new name of some sort.
It really doesn't matter what you use as long as you stay consistent.
- Change WIDTH## and HEIGHT## with the image's widths and heights.
Technically, they have to both be the same height and width.
- Change IMAGE2.gif with the second image's name.
This is the "hidden" image that will appear when the mouse is on it. Why is it listed first? I dunno.
- Change IMAGE1.gif with the first image's name.
This is the image that will appear on the page without the mouse on it.
- Change STATUS BAR TEXT to the text you want in the status bar.
If you are using the images I gave you above, this is what it will look like:
Keep the "Mr. Sexy Guy" part. I like it.
The Second ScriptNow that the main script knows what to do, it has to link itself to something in the body of the document. That's the second script. Look at the second script and follow these rules:
- Change LINKPAGE to the URL of the page this image will link to.
- Change OBJECTNAME to whatever name you used in the first script.
Please note you'll need to change it in THREE places
- Change IMAGE1.gif with the name of the first image.
That's the one on the page without the mouse.
- Change the two ## marks with the image's height and width numbers.
If you're following along, here's what it should look like on your page using the images above:
<A HREF="imageflip.html" OnMouseOver="ReplaceOrig('example');return true;"
<IMG SRC="goof4.gif" NAME="example" WIDTH="75" HEIGHT="50" BORDER="0" NATURALSIZEFLAG="0" ALIGN="BOTTOM"></A>
Adding OthersIf you want to add more than one flipping image to your page, you simply follow the steps outlined above again. Where you altered the line in the first script, add a second underneath it. Just make sure that line has completely new OBJECTNAMEs and image names. No need to repost the first script -- just add object lines.
Then follow the same steps to add another image as above. Just make sure the new second script uses the first script's new line's OBJECTNAME. If you don't, you'll get errors all over the place.
Getting It To Run In MSIEMany have been writing and telling me this script throws errors in Internet Explorer. True. But here's the answer from the script's author:
To make my "Image Flipping link" compatible with IE4...the line:
needs to be replaced with: if(document.images) browser=true;
Well, that's that. I'm not sure what else to tell you other than to enjoy a few of these on your page. Just keep them small due to load time. No one is going to sit through two 70K .jpgs downloading just to get a strange new look.
Well... okay, I might. But nobody else will.
[Let's Make It Work!]