So You Want Another Image Flip, Huh?

By Joe Burns

Use these to jump around or read it all...
[What's On The Screen]
[The JavaScript]
[Let's Make It Work!]
[Adding Others]

     I know I need to put a tutorial together when the mail regarding one certain topic begins to pile up. The latest "gotta have" thing is the link that changes as you run your mouse over it. Those of you who have looked at others' View, Source have already found that it's done through JavaScript.

     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 Screen

     Well, 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.

Here's the Red one. Download it and name it goof4.gif. Here's the Blue one. Download it and name it goof3.gif.

     I know they're out of numerical order. Don't worry about that right now.


The JavaScript

     I am quite sure there are many different methods one could use to do this. I happen to like the like the script sent to me by Robert Gasiorowski. It's fairly simple and allows you to use only one script for many different image flips.

     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.


Grab the First Script


     Now, for those of you following along at home: Once you have that script, paste it inside the <HEAD> and </HEAD> commands.
     Please remember this is a JavaScript, and as such you cannot edit it just anywhere. You must use a text editor that has no margins. Use Notepad in Windows and SimpleText in MAC. Again: Do not use a text editor with margins. Even with the margins set to the widest point, it will corrupt the script.

     Now you need the second script that will place the images on your page and create the flipping effect. Here it is:


Grab the Second Script


     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.

     Again, again... this is a JavaScript. See the two long lines that go off the page? Keep it just like that! If you don't, it won't work.

Let's Make It Work!

The First Script

     You'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:


object['example']= new objectdata(76,110,"goof4.gif","goof3.gif","Mr. Sexy Guy");


     Keep the "Mr. Sexy Guy" part. I like it.


The Second Script

     Now 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;" OnMouseOut="RestoreOrig('example');">
<IMG SRC="goof4.gif" NAME="example" WIDTH="75" HEIGHT="50" BORDER="0" NATURALSIZEFLAG="0" ALIGN="BOTTOM"></A>


Adding Others

     If 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 MSIE

     Many 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:

if((navigator.appName=="Netscape")&&(parseInt(navigator.appVersion)>=3)) browser=true;

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.

[What's On The Screen]
[The JavaScript]
[Let's Make It Work!]
[Adding Others]


Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •