© 1997-8 BigNoseBird.Com, Inc.
BigNoseBird.Com- Small Logo
BACK Home Guestbook

THE IMAGE FLIP MOUSEOVER

A popular technique for adding a little spice to your pages is the Image Flip Mouseover. Using JavaScript, you can easily install this effect in your pages.

Please keep in mind that as with most things beyond straight HTML, this will not work with all browsers. It should work with MSIE and Netscape provided each are Version 3 or greater.

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 an effect that looks like a light being turned on inside the image. Don't worry, we are using high efficiency graphics to avoid energy waste.

Cut & Paste? Of course! Just be sure to cut from the screen 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.

 
 
The Stars of Our Show!
Run your mouse over them...
  		login join

 
INGREDIENT #1: THE GRAPHIC FILES
These are the graphics that we will be using in our tutorial script. The images with the B in their names are the ones displayed when the mouse passes over them. The ones without the letter B 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.

       
JOIN.GIF JOINB.GIF LOGON.GIF LOGONB.GIF
658 bytes 2215 bytes 791 bytes 2291 bytes
       
Each image is 25 pixels HIGH by 88 pixels wide.
 
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.

When the mouse pointer passes over the image, the BNB_mouseon subroutine (mini-program) will display the image located in the section //MouseOn which if you notice, all have variable names ending with 1. i.e., login1 and login1.src

All of the variable names ending with 0 are displayed when the mouse leaves the image. If this were not done, an image once selected, would forever remain selected. Okay, at least until you go to another page or turn off the computer.

 
<HEAD>
<script language="JavaScript">
<!--
browsok = (((navigator.appName == "Netscape")
&& (parseInt(navigator.appVersion) >= 3))
|| ((navigator.appName == "Microsoft Internet Explorer")
&& (parseInt(navigator.appVersion)>=3)));
if(browsok){
  // MouseOn   
  // Note: the 88 is for the WIDTH, 25 is for the HEIGHT
     login1 = new Image(88, 25);
     login1.src = "LOGONB.GIF";
     join1 = new Image(88, 25);
     join1.src = "JOINB.GIF";
     

  // MouseOff
  // Note: the 88 is for the WIDTH, 25 is for the HEIGHT
     login0 = new Image(88, 25);
     login0.src = "LOGON.GIF";
     join0 = new Image(88, 25);
     join0.src = "JOIN.GIF";
     

}
function BNB_mouseon(n){
     if(browsok){
          imageON = eval(n + "1.src");
          document [n].src = imageON;
          }
}
function BNB_mouseoff(n){
     if(browsok){
imageOFF = eval(n + "0.src");
     document [n].src = imageOFF;
          }
}
// -->
</SCRIPT>
</HEAD>
INGREDIENT #3: THE LINKS
The final part step to installing our script is to place the links where we want them in our HTML document. Here are the key points about the links:
  • href is the page (or full URL) you want to link to
  • The IMG SRC is the graphic you want to display when the mouse is not over the graphic. (off)
  • The login between the ' ' marks relates to the names of the variables in the script, i.e. login0 and login1
As you can see, this step is no more difficult than plugging in a graphic image link, other than a little extra typing. 

  <a href="mouse.shtml" 
        onmouseout="BNB_mouseoff('login')" onmouseover=
       "BNB_mouseon('login');return true ">
    <img src="LOGON.GIF" name="login" 
       WIDTH=88 HEIGHT=25 VSPACE=3 border=0 alt=login></a>

  <a href="mouse.shtml" 
        onmouseout="BNB_mouseoff('join')" onmouseover=
       "BNB_mouseon('join');return true ">
    <img src="JOIN.GIF" name="join" 
       WIDTH=88 HEIGHT=25 VSPACE=3 border=0 alt=join></a>
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:

1. Select Your Graphics
Actually, you could say this is Step #0. You will need to pick out graphics for your image flips. In our example script the WIDTH=88 and the HEIGHT=25.

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.

2. Add to the MouseOn List
The MouseOn List are the variables or names ending with the numeral 1. If you want to create a link using the name mylink, you would add the following two lines to the section named //MouseOn 

     mylink1 = new Image(88, 25);
     mylink1.src = "mypicb.gif";

3. Add to the MouseOff List
The MouseOff List is set up the same way as the MouseOn list, except the names end with the numeral 0. Continuing with our mylink addition, you would add to the //MouseOff section the next two lines: 

     mylink0 = new Image(88, 25);
     mylink0.src = "mypic.gif";

4. 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 following as a guideline: 

  <a href="mouse.shtml" 
        onmouseout="BNB_mouseoff('mylink')" onmouseover=
       "BNB_mouseon('mylink');return true ">
    <img src="mypic.gif" name="mylink" 
       WIDTH=88 HEIGHT=25 VSPACE=3 border=0 alt=join></a>