SonOfSofaman.com   Joel     People     Hobbies     Fun     Miscellaneous    

 

Code

  
  VBScript Routines  
  Decimal to Binary
  Binary to Decimal
  Hex. to Decimal   Decimal to Hex.
 
JavaScript Routines
  setTimeout
  Rollovers
 
HTML
  Web Safe Colors
  Web Safe Color Picker

JavaScript: Rollovers

The term "JavaScript rollover" is used to describe an effect used on many web pages. If an image on a web page changes in some way when the mouse is rolled over it, chances are it's a JavaScript Rollover. The effect is relatively easy to achieve and can add a subtle bit of flair to a site.

Some developers use tools like DreamWeaver to create these effects. That's fine if you want to achieve the effect without really understanding how it works. I prefer coding JavaScript rollovers manually. The code is really very simple, and considerably easier to integrate into your own pages.

Two versions of an image
that differ by color
Two versions of an image
with 3D effects applied
To achieve the basic rollover effect, you will need two images that differ in some way. Typically the two images will differ in color only, but there is plenty of room for creativity here. One possibility is two versions of the same button image; each using different shading effects so that it appears that one button is up and the other is pushed down.

Both versions of the rollover images need to have the same dimensions and both should be in the same format (.GIF or .JPG).

The names you give your image files is not important to the rollover effect, but for simplicity sake, you should make both file names be the same with a different suffix applied. Names like buttonblack.gif & buttonred.gif or button0.gif & button1.gif are good examples.

Here is the code that makes the rollovers work. You will need to modify this code based on the file names you decide upon for your image files.

Listing 1

  1. <HTML>
  2. <HEAD>
  3. <TITLE></TITLE>
  4. <SCRIPT LANGUAGE="JavaScript">
  5. <!--
  6. // Browser must be Navigator 3.x+ or IE4+
  7. if ((navigator.appName == "Netscape" && parseInt(navigator.appVersion)
    >= 3) || (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) >= 4))
  8.   blnRollover = true;
  9. else
  10.   blnRollover = false;
  12. // Preload images.
  13. if (blnRollover)
  14. {
  15.   button0=new Image();
  16.   button0.src="/hobbies/code/images/button0.gif";
  17.   button1=new Image();
  18.   button1.src="/hobbies/code/images/button1.gif";
  19. }
  21. // Function to swap images.
  22. function Rollover(strImage, strState)
  23. {
  24.   if (blnRollover)
  25.     document[strImage].src=eval(strImage + strState + ".src");
  26. }
  27. // -->
  28. </SCRIPT>
  29. </HEAD>
  31. <BODY>
  32. <IMG SRC="/hobbies/code/images/button0.gif" NAME="button" ON
    MOUSEOVER="Rollover('button', '1');" ONMOUSEOUT="Rollover('button', '0');">
  33. </BODY>
  34. </HTML>

The code in lines 7-10 sets a Boolean flag based on the browser's version. This flag will be set false if the browser will not support the rollover code. This code is not contained within a function, so it executes when the page loads.

The code in lines 13-19 preloads the images used to achieve the rollover effect. If the images were not pre-loaded like this, the visitor would notice a delay the first time they moused over the image. If your image file names are different, change the names and paths in these lines of code. This code is not contained within a function, so it executes when the page loads.

The code in lines 22-26 is a function that swaps one version of the rollover image with the other, thus achieving the rollover effect. You shouldn't need to change this function to reflect your file names since it doesn't reference the filenames directly. This function is not called until the mouse rolls over an image, and again when the mouse rolls off the image.

line 32 is just an image tag. You will need to set the SRC, NAME, ONMOUSEOVER and ONMOUSEOUT attributes of the image tag as follows:

SRC - Set the SRC attribute to the first of the two versions of the image. Choose the default image, or the one that should show when the mouse is not pointing at the image.

NAME - The NAME attribute MUST BE SET TO THE BASE NAME of the image variables used to hold the preloaded images. If the variable names are "button0" and "button1", then set the NAME attribute of the image to "button".

ONMOUSEOVER - This attribute is set to the name of the Rollover function, with two parameters. The first parameter should be the same as the NAME of the image. The second parameter is the suffix that will be added to the NAME value.

ONMOUSEOUT - Set this attribute the same as ONMOUSEOVER except the second parameter should contain the suffix of the second variable name.

You should also set the ALT, BORDER, HEIGHT and WIDTH attributes on all IMG tags. These attributes are not required to make the rollover effect work, but it is recommended practice for all IMG tags.

 
Tell me what you think Copyright © 2000 Joel T. Anderson