Image rollovers (sometimes also called Image MouseOvers or mouse-overs) can be found in numerous websites on the Internet 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.
Note that this is not what I use on thesitewizard.com for the navigation buttons in the left column. My buttons are purely text, with the 3D button effect created by CSS. The change in colour when you mouse over those buttons is also achieved using CSS. There are many ways to skin a cat, and the article you are currently using describes one method.
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.
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.
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:
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.
The code above requires JavaScript to execute. This means that if your visitor has disabled JavaScript in his/her browser, the mouseover effect will not be shown. 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. You may also be interested in doing it the way I did on thesitewizard.com, using pure text. If this is the case, please read How to Create 3D Buttons Using CSS and How to Make Your Links Change Colour When the Mouse Hovers Over It (Using CSS). Alternatively, if you prefer an even easier way to do this, you can also use the Free CSS Menu Bar Buttons Wizard to generate the buttons.
Copyright 2001-2016 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/
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 https://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 or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Create Image Rollovers in JavaScript
