Image Rollover

navigation 1996 still works

Swaps a button image when the mouse moves over it. The definitive 90s script.

In 2026: Works. Preloading the hover image is the whole point: without it the button flickers blank the first time you hover, which is exactly what happened in 1996.

Where it came from: Netscape JavaScript 1.1 image object, 1996. Probably the single most copied script of the decade. MDN ↗

<script language="JavaScript">
<!--
// Preload so there is no flicker on first hover
var onImg = new Image();
onImg.src  = "https://xbawx.com/btn/assets/a6/a6123e8f5e63e584a09d69d3555770b2295cf761.gif";
var offImg = new Image();
offImg.src = "https://xbawx.com/btn/assets/f8/f8fe94a7667d1041aee087e1c130f93c0b11462e.gif";

function swap(name, src) { document.images[name].src = src; }
//-->
</script>

<a href="/"
   onmouseover="swap('home', onImg.src)"
   onmouseout="swap('home', offImg.src)">
  <img name="home" src="https://xbawx.com/btn/assets/f8/f8fe94a7667d1041aee087e1c130f93c0b11462e.gif"
       width="88" height="31" border="0" alt="Home">
</a>

sandboxed demo · breaks nothing but itselfrestart

More in navigation