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

by Christopher Heng, thesitewizard.com

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:

<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.

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:

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 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).

Copyright 2001-2014 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/

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Create Image Rollovers in JavaScript





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.