SHARE

So, You Want An Image Flip, Huh?

Written By

Jan 4, 2005

Use these to jump around or read it all…

[The Parts]

[The Script]

[Denote The Images]

[Call For The Script]

[More Than One Image Flip On A Page]

This is one of the most asked-for items on the HTML Goodies site, an image flip. There has been a tutorial on image flips posted for a long time now, but the script employed gave MS Explorer some fits until some changes were made. It’s an excellent script though and is still a great JavaScript tutorial to walk through. Heck, you may like it better than this new script. To see the previous Image Flip Tutorial, click here.

This new script is much shorter and more compact. It also works cross-browser with no trouble. Plus it’s a snap to configure for your own use. Even better, it’s an active image so it can be clicked on to go to another page! Here’s the effect: Run your mouse over the image!

The Parts
The Script
Denote The Images
Call For The Script
More Than One Image Flip On A Page

The Parts

You’ll need four things to make this work: Two images, a JavaScript, and a command that calls for the images and the effect of the script.

The effect I put together up there is done with two images named goof3.gif and
goof4.gif. Why “goof,” you ask? Because I’m
your father, that’s why! Actually, that’s not the answer, but I’ve always wanted to say that. A better question to ask is why 3 and 4 instead of 1 and 2? Well, here’s the reason: I don’t know.

There. Now that that’s settled….

The Script

You should have been able to get the two images from the links above. If you haven’t already, do so. Now you need the script. This will go between the <HEAD> and </HEAD> commands on your page. You can copy and paste it right from here.

<SCRIPT LANGUAGE=”JavaScript”>

<!– hide from none JavaScript Browsers

Image1= new Image(75,50)

Image1.src = “goof3.gif”

Image2 = new Image(75,50)

Image2.src = “goof4.gif”

function SwapOut() {

document.imageflip.src = Image2.src; return true;

}

function SwapBack() {

document.imageflip.src = Image1.src; return true;

}

// – stop hiding –>

&lt/SCRIPT>

Denote The Images

Now that you have copied and pasted that script into your document, between the HEAD commands, you need to denote what graphics will be used. You will do that in this section of the script:

Image1= new Image(75,50)

Image1.src = “goof3.gif”

Image2 = new Image(75,50)

Image2.src = “goof4.gif”

     When you start editing, remember that the image that will appear first (without any MouseOver) is the one listed second. Remember, this is a flip; when this script is made functional, the second graphic will be the first to display, then the original image will come back again. With me?

     So, put the names of your images in reverse order. Next, be sure to denote the images width and height. The images I am using are 75 pixels wide by 50 pixels high. See that above? Put your numbers in where I have (75,50).

     Before you ask — no, the images do not have to be the same size, but it does better the effect if they are.

Also bear in mind that these images will need to load quickly. You see, the second image is not loaded when the mouse first goes over the area. When the mouse passes over, the script is activated, and the second image is called for. There will be a slight loading time span. With that in mind, go with small-byte sized graphics to speed it along.

Call For The Script

Now we set up the magic. Here’s the command you place in the <BODY> section of your document where you want this image to appear.

You know this format well. It’s a simple HREF link command with some JavaScript commands added. Notice that it is constructed so the image is what is active. The height and width of the image is denoted and the image’s BORDER is set to zero.

The image that is being called for is the image that you listed second above in the script. Again, the script hasn’t been called into play yet. The command is just displaying the image you tell it to. In this case, goof4.gif.

More Than One Image Flip On A Page

As you can see, the script and the command that calls for it are pretty well married. If you haven’t seen it so far, note that the script has two lines that read:

document.imageflip.src

     Then, if you look at the command that calls for the script, you’ll see that a name is given to the image: IMAGEFLIP.
     I’m sure there are other ways of doing this, but I add more image flips to the page by choosing a new word that will go in place of “imageflip” in the above example. Let’s say the new word is just “image.” I would then change out the word “imageflip” with the word “image” three times. Once in the command and twice in the script. See that?

     I would then change out the script with two new images and redo the entire process: A new script for each image flip I wanted, each with a different name so the browser can keep them separate.

     Again, there are probably other methods (check one out here), but the script is so small that I can copy and paste faster that creating new JavaScript lines.

And that’s that. Now go start flipping!

Enjoy!