Image rollovers (sometimes also called Image MouseOvers or mouse-overs are a fairly common sight in websites today. 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:
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.
code:
<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:
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:
code:
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:
code:
<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.