BigNoseBird.Com- home Small Logo
The 508 Compliant Guide to 
       Big Nose Bird
BACK

THE IMAGE Double! 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-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

Here's the code to call the images after the </head> tag

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.


Find or Give Help on the BBS
 
Home Top E-Mail
If it looks great, it's by Christine
Some Fine Print
© 1997-2003 BigNoseBird.Com®, Inc. All rights reserved. All other trademarks are the sole property of their respective owners. The products that we recommend are only ones that we use. We have no relationship with any of the authors or their companies. We cannot assume responsibility for their ultimate performance or lack of same. We also cannot assume responsibility for either any programs provided here, or for any advice that is given since we have no control over what happens after our code or words leave this site. Always use prudent judgment in implementing any program- and always make a backup first! For further information, please read our Privacy Statement. We can be contacted at webmaster@bignosebird.com.


<reallybig.com>
Web Builder Network Portal
Advertise
on the
Reallybig.com
Network
BigNoseBird Newsletter
Subscribe
Un-Subscribe


Sign up today to receive our low volume newsletter. Tips, tricks, news, and whatever else crosses our minds.
Back Issues
Privacy Statement