This page was last updated on 2012-08-21
The Image Flip
Let’s get into the swing of things with an example — pass your mouse over the image below.
This script is easy to configure, only requiring that you put some words in the right places and name your images correctly. To get the effect working, you first need two images. They should have the same dimensions (height and width), and should reside in the same directory. Give them descriptive names, and save the rolled-over version with a 2 at the end of the filename (eg: image2.gif). This is important. My two images in the flip to the left are called smirk1.gif and smirk2.gif
<head> of the document, so that it is already working before it has a chance to be called.
Break it Down One Time
First we define some variables. The
revert array will be used a little later on to save the filename of the image we want to return to when the effect ends. The
inames array is used to store the names of all the images that we want to flip — entries should be encased in single-quotes and separated by commas.
Next comes the preload code, which automatically loads the images that are going to be called by the script. These need to be ready to go when the script calls them, as otherwise there’ll be a downloading pause before the image flips. We simply go through the
inames array and, for each image, load its flipped version in the background. These images are stored in the browser’s cache, ready to leap into the fray. I keep my images in the folder media/ — you should change this to whatever your folder is named.
sourcetip: Your images, especially the one that appears during the flip, will have to load very quickly if the effect is going to be a success. Even with the built-in pre-load, you must still keep them small by optimising them down.
Finally we have the two functions that will do all the magic,
out. Each image object has the modifiable property
src, the image’s filename. When the user places their mouse on the image,
over is called. Once the support detection is done, it saves the file’s current
src value into a slot in
revert. It then changes the
src value to the preloaded version we have ready. The images will switch.
Once the user then moves their mouse back off the image, we want it to change back to its original value, which we cunningly saved for this purpose into the
revert variable. So, the
out function merely reassigns the image’s
src value to this filename, and the image returns to its initial state. Ace.
Inserting the Images
Right, so that’s the script sorted out, now we just need to add the images. This is done like any other image, but with some extra JS attributes thrown in:
<img src="media/smirk1.gif" name="smirk" onMouseOver="over(0)" onMouseOut="out(0)">
This HTML creates the image. The script will then wait for the user to trigger it. The
onMouseOver event handler ‘listens’ for certain user actions; in this case their mouse passing over the image. When this happens it fires the
over function, and sends the image’s number along with it. It’s the first rollover image on the page so it sends a 0. The second image would send a 1 etc. Always remember, the first object in an array is numbered with a zero.
When the user’s mouse moves away from the image again,
onMouseOut notices and fires
out, again adding in the image’s number so the function knows which image it has to work on.
name attribute we add to our images should be exactly the same as the names we gave the image in the
inames array in the script. This is used to construct the rolled-over image’s filename. If we call our first image
smirk, as I have done, the script decides that the corresponding rolled-over filename will be media/smirk2.gif. The initial image can be called anything you want, but it would be a good idea to name it similarly to the second, ending with a 1.
Expanding the script’s usefulness to many rollovers on the same page is easy — you simply add a new entry to the
inames array and then send a different number with the functions. So, to add a second rollover, one line in the script will need to be modified:
var inames = new Array('smirk', 'smile');
The image code will be similar:
<img src="media/smile1.gif" name="smile" onMouseOver="over(1)" onMouseOut="out(1)">
That’s it. Each new rollover image just needs a new entry in
inames and the correct number to be sent with the functions.
Changing Multiple Images Together
You can even set it up so that two or more images change at a time. This is achieved easily too — by simply executing the
out functions repeatedly for each event. Because each image has a unique index in the
inames array, they will not interfere with each other. Mousing over the following link would change the first two rollover images on the page simultaneously, and then switch them both back on
MouseOut — also demonstrating how the image itself does not have to be the triggering element.
<a href="index.html" onMouseOver="over(0), over(1)" onMouseOut="out(0), out(1)">Flip off</a>
In a similar fashion, you can also get the image to change
onClick, though this is rarely used as the event doesn’t last very long.