Dug this out of the archives & modified it in a hurry so...in practice, I'd streamline it by using better naming conventions (root words) for the images, but I pulled these off the web so, used what was there.
<html>
<head>
<script type="text/javascript" language="JavaScript">
var latched = '';
var offButtons = new Array(), overButtons = new Array(), latchedButtons = new Array();
var imageDir = 'http://image.fg-a.com/';
var imageNames = new Array('home','back','next');
var offButtonURLs = new Array('b_b_2a.gif','b_b_3a.gif','b_b_4a.gif');
var overButtonURLs = new Array('b_dg_2a.gif','b_dg_3a.gif','b_dg_4a.gif');
var inButtonURLs = new Array('b_g_2a.gif','b_g_4a.gif','b_g_3a.gif');
function preloadImages() {
if (document.images) {
for (var i=0; i<imageNames.length; ++i) {
offButtons[imageNames[i]] = new Image();
offButtons[imageNames[i]].src = imageDir + offButtonURLs[i];
overButtons[imageNames[i]] = new Image();
overButtons[imageNames[i]].src = imageDir + overButtonURLs[i];
latchedButtons[imageNames[i]] = new Image();
latchedButtons[imageNames[i]].src = imageDir + inButtonURLs[i];
}
}
}
preloadImages();
function rollon(whichImg) {
if (latched != whichImg)
document[whichImg].src = overButtons[whichImg].src;
}
function rolloff(whichImg) {
document[whichImg].src = offButtons[whichImg].src;
}
function latch(whichImg) {
if (document.images) {
if (latched == whichImg) return; //already depressed, cya
document.images[whichImg].src = latchedButtons[whichImg].src; //latch it
if (latched) // other button latched?
document.images[latched].src = offButtons[latched].src; //restore it
}
return true; //couldn't hurt
}
function check_latch(whichImg) {
if (document.images) {
if (latched != whichImg) //pulled off before mouseup?
document.images[whichImg].src = offButtons[whichImg].src; //cancel latch
if (latched) //other button previously latched?
document.images[latched].src = latchedButtons[latched].src; //restore it
}
}
</script>
</head>
<body onselectstart="return false;">
<table>
<tr><td>
<a href="#"
onmousedown="this.down=true;latch('home')"
onmouseup="if(this.down)latched='home';this.down=false"
onmouseover="rollon('home')"
onmouseout="rolloff('home');check_latch('home');this.down=false"
onclick="status='HOME';return false;"> <!-- optional ** assign link -->
<img src="http://image.fg-a.com/b_b_2a.gif" name="home" alt="Home" border="0"></a>
</td></tr><tr><td>
<a href="#"
onmousedown="this.down=true;latch('back')"
onmouseup="if(this.down)latched='back';this.down=false"
onmouseover="rollon('back')"
onmouseout="rolloff('back');check_latch('back');this.down=false"
onclick="status='BACK';return false;">
<img src="http://image.fg-a.com/b_b_3a.gif" name="back" alt="Back" border="0"></a>
</td></tr><tr><td>
<a href="#"
onmousedown="this.down=true;latch('next')"
onmouseup="if(this.down)latched='next';this.down=false"
onmouseover="rollon('next')"
onmouseout="rolloff('next');check_latch('next');this.down=false"
onclick="status='NEXT';return false;">
<img src="http://image.fg-a.com/b_b_4a.gif" name="next" alt="Next" border="0"></a>
</td></tr></table>
</body>
</html>