INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Javascript Events

An Alternative to Dreamweaver's MouseOver fucntion by tviman
Posted: 5 Aug 04

Here's a mouseover script I've been using for quite sometime.  It's fast, simple to use, and works in all browsers.  Let's start with the javascript code first:

function switchimage(imgDocID,imgObjName)
{
 document[imgDocID].src = eval(imgObjName + ".src");
}

img1 = new Image(79,29);
img1.src  = "images/image1.gif";
img2 = new Image(79,29);
img2.src  = "images/image2.gif";
img3 = new Image(89,29);
img3.src  = "images/image3.gif";
img4 = new Image(89,29);
img4.src  = "images/image4.gif";
img5 = new Image(81,29);
img5.src  = "images/image5.gif";
img6 = new Image(81,29);
img6.src  = "images/image6.gif";

This is all the code needed for 3 onmouseover/onmouseout buttons!  But let me explain...

imgDocID is a unique name given to the image you'll use on the "mouseover" image.
imgObjName is the name of the image in the list above (img1, img2, img3, etc.)

img1 = new Image(79,29); creates the imgObjName used in the script.
img1.src  = "images/image1.gif"; identifies the source of the image.

You'll need to create this pair of declarations for each image used in the onmouseover/onmouseout sequence.  
Note:  you can put this code in an external .js file (my preference) or between <script language="javascript"></script> tags in your HTML page.

Now for the code that calls this function:

<a href="index.html" onmouseover="switchimage('index','img2');" onmouseout="switchimage('index','img1');"><img src="images/image1.gif" name="index" width="79" height="29" border="0"></a>

<a href="page1.html" onmouseover="switchimage('page1','img4');" onmouseout="switchimage('page1','img3');"><img src="images/image3.gif" name="page1" width="89" height="29" border="0"></a>

<a href="page2.html" onmouseover="switchimage('page2','img6');" onmouseout="switchimage('page2','img5');"><img src="images/image5.gif" name="page2" width="81" height="29" border="0"></a>

Note the unique image names in red.  Note that this ID is unique to each onmouseover/onmouseout event for a given image.  If you're implemetation doesn't work, this is the place to look for the problem.  If this ID isn't unique to the given image, the mouseover won't work properly.

Also note the image name attribute in blue.  This is the same name used in the javascript to identify the image.  Again, this name MUST BE UNIQUE or the mouseover won't work.  (Note that this name is different for the mouseover and mouseout image - img2 for onmouseover and img1 for onmouseout.  Of course, you can change this to suit your needs.)

I've had as many as 200 images identified as rollover images (img1 = new Image(79,29);
img1.src  = "images/image1.gif";)
without any noticable loss of performance or speed.  The main thing is the unique ID's and image names - these are the key to making this script work.

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close