How to Create Image Rollovers in JavaScript

by Christopher Heng, thesitewizard.com

Image rollovers (sometimes also called Image MouseOvers or mouse-overs) are a fairly common sight in websites today (although I don't use them at this time on either thesitewizard.com or thefreecountry.com). You've probably seen them around too: when you move your mouse cursor over a button on a particular site, the button appears to be depressed. Move your mouse cursor away, and the button pops out again.

Image rollovers are implemented by creating two images for the same button. The first image is that which you want displayed when the mouse is not hovering over it, typically the "undepressed" or "up" state of a button. The second image is the graphic you want displayed when the mouse pointer is over the graphic, usually showing the button in a depressed or "down" state.

The actual mouse-over effect is created by some JavaScript code that is added to the affected links. Your link would typically look like this:

<a href="index.html"
  onmouseover="buttondown('homebutton')"
  onmouseout="buttonup('homebutton')">
<img src="homebutton.gif" name="homebutton" border="0" />
</a>

When your mouse moves over the link above, the JavaScript snippet above will attempt to execute the function buttondown(). When your mouse moves away, the function buttonup() will be executed.

Now you need to add the called JavaScript functions to your web page. Add the following code to the <head> section of your HTML document.

<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
    homebuttonup       = new Image();
    homebuttonup.src   = "homebutton.gif" ;
    homebuttondown     = new Image() ;
    homebuttondown.src = "homebuttondown.gif" ;
}
function buttondown( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "down.src" );
    }
}
function buttonup ( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "up.src" );
    }
}
// -->
</script>

The initial code pre-loads the "home" button images needed for the page, so that the actual roll-over switch of images will proceed faster on your visitor's browser.

The function buttondown() and buttonup() modifies the name of the button that is passed to them. If you will recall, the name attribute on the <img> tag was originally set to "homebutton". When this is passed to the buttondown() function, it changes the reference to "homebuttondown.src" which was defined earlier to point to the file "homebuttondown.gif". Likewise, the buttonup() function, when called changes the name passed to it to "homebutton.src", which was defined to refer to "homebutton.gif".

The end result of the foregoing is that when the mouse moves over the "Home" button, the JavaScript function causes the "homebuttondown.gif" file to be displayed. When it moves away, the "homebutton.gif" file is used.

Modifying the Code

You can modify the code above to add support for other buttons (such as an "About" button, a "Feedback" button, etc).

To add support for, say, an "About" button, you would simply have to add an additional link to the main web document like the following:

<a href="about.html"
  onmouseover="buttondown('aboutbutton')"
  onmouseout="buttonup('aboutbutton')">
<img src="aboutbutton.gif" name="aboutbutton" border="0" />
</a>

Remember that the parameter given to the buttondown() and buttonup() functions must match the "name" attribute of the IMG tag.

To the initial portion of the JavaScript code in the <head> section, just add the following lines to the first "if (document.images) {" section, following the code for the "home" buttons:

aboutbuttonup       = new Image();
aboutbuttonup.src   = "aboutbutton.gif" ;
aboutbuttondown     = new Image() ;
aboutbuttondown.src = "aboutbuttondown.gif" ;

The final code snippet for the <head> section will thus look like this:

<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
    homebuttonup       = new Image();
    homebuttonup.src   = "homebutton.gif" ;
    homebuttondown     = new Image() ;
    homebuttondown.src = "homebuttondown.gif" ;

    aboutbuttonup       = new Image();
    aboutbuttonup.src   = "aboutbutton.gif" ;
    aboutbuttondown     = new Image() ;
    aboutbuttondown.src = "aboutbuttondown.gif" ;
}
function buttondown( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "down.src" );
    }
}
function buttonup ( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "up.src" );
    }
}
// -->
</script>

That's it. No other code modifications are needed. Notice that the functions buttondown() and buttonup() have not been modified. They will work with your other buttons as long as you follow the pattern given above in naming your up and down buttons.

You're not limited to "about" and "home" buttons of course. You can add as many buttons as you need by following the procedure outlined above.

Limitations

The code above requires JavaScript 1.1 and above to execute. This means that if your visitor is using a browser prior to Netscape 3.0 or Internet Explorer 4.0, they will not be able to view your rollovers.

The links, however, will still work correctly when clicked (even on browsers with JavaScript disabled or with no JavaScript support at all). This is important since mouseover effects are purely cosmetic, and you don't want them to detract from the overall functionality of your site.

Note that you should probably also make sure that the files you use for the buttons are small. If your files are too big, the image rollovers (or mouse-overs) will not have the smooth effect of buttons popping up and down that you intend.

Finally, like all web page graphics, use your discretion in implementing mouse-over images on your site. Excessive use of rollover images will add to the overall load time of your web pages, and, if you are on a commercial web host, increase your bandwidth costs.

Copyright 2001 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/

If you find this article useful, please consider making a donation.

You are here: Top > JavaScript Programming Tutorials and Free JavaScripts > How to Create Image Rollovers in JavaScript

thesitewizard™ News Feed (RSS Site Feed)

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

New Pages

Popular Pages

How to Link to This Page

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as:

How to Create Image Rollovers in JavaScript

Create Image Rollovers (Mouse-Overs) in JavaScript

How to make the image change when the mouse cursor is over it (rollovers or mouseovers)

How to Create Image Rollovers in JavaScript

Modifying the Code

Limitations

thesitewizard™ News Feed (RSS Site Feed)

Please Do Not Reprint This Article

Related Pages

New Pages

Popular Pages

How to Link to This Page