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.
<a href="index.html" onmouseover="buttondown('homebutton')" onmouseout="buttonup('homebutton')"> <img src="homebutton.gif" name="homebutton" border="0" /> </a>
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".
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.
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:
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.
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. You may also be interested in alternative methods to doing the above tricks using purely text, as described in the articles How to Create 3D Buttons Using CSS and How to Make Your Links Change Colour When the Mouse Hovers Over It (Using CSS).
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.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as: