Bignosebird.com's Image Flip Mouseover Javascript

THE IMAGE Double! FLIP MOUSEOVER

Please keep in mind that as with most things beyond straight HTML, this will not work with all browsers. It should work with MSIE-4 and Netscape-3 & 4.

This tutorial will split the task into three ingredients:

The Images
The Script
The Links <A HREF> tags

In the box below you will see two rather typical looking link graphics. If you take your mouse pointer and run it over them, you should see when you place your curser over the button two other images change. Don't worry, we are using high efficiency graphics to avoid energy waste.

Cut & Paste? Of course! Just be sure to cut from the form and NOT from view source.

Please try to get the script as shown working before making any changes. This can save you a little extra frustration! Instructions for customizing will be at the end of the tutorial.

INGREDIENT #1: THE GRAPHIC FILES
These are the graphics that we will be using in our tutorial script. The images with the a in their names are the ones displayed when the mouse passes over them. The ones without the letter a are displayed otherwise.
Advice: It is very important to keep in mind that using this technique involves your reader downloading two graphics for each and every image flip link. You should therefore try and keep each image as small as possible. Always balance how long your reader has to wait vs. the value of the desired effect!
In picking your graphics, make sure that your on/off set for any link are of the same exact height and width. This does not mean that all of your buttons have to be the same size, but each pair must be to avoid distortion.

image1.gif image2a.gif image2.gif image3a.gif image3.gif

this graphic never changes but acts as the trigger to change the other two

this is the before mouseover image to the right of the button

this is the image that is triggered when the mouseover is active

this is the before mouseover image for the text portion

this is the image that is triggered when the mouseover is active

118x35 pixels 77x35 pixels 77x35 pixels 118x55 pixels 118x55 pixels

INGREDIENT #2: THE SCRIPT
This section contains our actual script source code. The script once modified for your needs should be pasted into the part of your page between the <HEAD> and </HEAD> tags. If your page already has these tags, do not include the <HEAD> and </HEAD> in the source below. In this page, the script is inserted directly under the page's <TITLE>.
If you are uncertain as to where the <HEAD> and </HEAD> tags go, here is a quick reminder:
<HTML> <HEAD> <TITLE>This is the title</TITLE> </HEAD> <BODY>
HOW IT WORKS
The script starts off by checking to see if you have a browser capable of running this script. If not, it will be ignored by the browser, otherwise, the script and extra images are loaded and will be ready for when the mouse passes over a script controlled link.

Here's the part of the script that has to be in the </head> tag <script language="JavaScript"> function simages() { //v1.0 var i,target,j=0,sarray=new Array,oarray=document.simgdata; for (i=0; i < (simages.arguments.length-2); i+=3) { target = eval(simages.arguments[(navigator.appName == 'Netscape')?i:i+1]) if (target != null) { sarray[j++] = target; sarray[j++] = (oarray==null || oarray[j-1]!=target)?target.src:oarray[j]; target.src = simages.arguments[i+2]; } } document.simgdata = sarray; //used for restore } </script> <script language="JavaScript"> function simgr() { //v1.0 if (document.simgdata != null) for (var i=0; i<(document.simgdata.length-1); i+=2) document.simgdata[i].src = document.simgdata[i+1]; } </script>
Here's the code to call the images after the </head> tag

<p><a href="#" onmouseover="simages('document.graphic','document.graphic','image2.gif','document.text','document.text','image3.gif')" onmouseout="simgr();simgr()"><img src="image1.gif" width="118" height="35" name="button" border="0"></a> <img src="image2a.gif" width="77" height="35" name="graphic"> <br> <img src="image3a.gif" width="118" height="55" name="text"> </p>

Create Your Link
Now that the MouseOff and MouseOn lists have been added to, we are on the home stretch. Create a link in your HTML document where it is needed using the above as a guideline. Just replace http://www.bignosebird.com with your link. ... It's that easy!

CUSTOMIZING THE SCRIPT FOR YOUR SITE
Once you have the the script working, you will know you have a working installation and can start making modifications. Here is all you have to do:

You will need to pick out graphics for your image flips. Remember to make them the same size for the ones that roll over each other

Unless you make your graphics that exact size, please measure your graphics and change the values in every place they occur in the script and links. If you do not do this, your graphics will be mushed and otherwise distorted. Since this is an excercise in vanity, let's be fully vain.

Keeping in mind that all the graphics will need to be downloaded by your viewer, please try to keep each image as small as possible.