Java-Scripts.net

Image Rollover Script

Create interactive buttons and visual effects with this classic rollover script. It swaps the source of an image when a visitor hovers their mouse over it, perfect for navigation menus.

Interactive Rollover Demo

Hover your mouse over the image below:

Rollover Demo

Copy the Script

<!-- The HTML Image Tag -->
<img src="button_off.gif" 
     onmouseover="this.src='button_on.gif'" 
     onmouseout="this.src='button_off.gif'" 
     alt="Menu Button">

<!-- Preloading Script (Optional but recommended) -->
<script>
  if (document.images) {
    var imgOn = new Image();
    imgOn.src = "button_on.gif";
  }
</script>

FAQ

Preloading downloads the 'hover' image in the background as soon as the page loads. This prevents a blank flicker when the user hovers for the first time.

A standard rollover swap is instant. To add a fade, you would need to use CSS opacity transitions or a more advanced script that layers two images.

Simply wrap the <img> tag inside an <a href="..."> tag like any other image link.