Free Scripts

How to Create Image Rollovers in JavaScript: Step 1
by Christopher Heng

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>

Navigate

  Sign up for our free, low volume email newsletter. Be notified when new free scripts are added.