<html>
<head>
<script type="text/javascript" language="JavaScript1.1">
var prevBtnOff = new Image(42, 52);
prevBtnOff.src = "http://w3cschool.cn/style/demo/Google-Chrome.png";
var prevBtnOn = new Image(42, 52);
prevBtnOn.src = "http://w3cschool.cn/style/demo/InternetExplorer.png";
var nextBtnOff = new Image(42, 52);
nextBtnOff.src = "http://w3cschool.cn/style/demo/Firefox.png";
var nextBtnOn = new Image(42, 52);
nextBtnOn.src = "http://w3cschool.cn/style/demo/Safari.png";
function highlightButton(placeholder, imageObject) {
document.images[placeholder].src = eval(imageObject + ".src")
}
</script>
</head>
<body>
<a href="javascript:history.back()"
onmouseover="highlightButton('Prev','prevBtnOn');
window.status='Previous';
return true;"
onmouseout="highlightButton('Prev','prevBtnOff');
window.status='';
return true;">
<img src="http://m.hgci.cn/style/download.png" border="0" width="52" height="42" name="Prev">
</a>
<a href="javascript:history.forward()"
onmouseover="highlightButton('Next','nextBtnOn');
window.status='Next';
return true;"
onmouseout="highlightButton('Next','nextBtnOff');
window.status='';
return true;">
<img src="http://m.hgci.cn/style/download.png" border="0" width="52" height="42" name="Next">
</a>
</body>
</html>
The code above is rendered as follows: