Rollover Images in JavaScript
To do so is to copy or copy the JavaScript code below into your web pages. Then place it before the tag <HEAD>, or placed before the position of the image.
<SCRIPT TYPE="text/javascript"> <!-- // copyright 1999 Idocs, Inc. http://www.idocs.com/tags/ // Distribute this script freely, but please keep this // notice with the code. var rollOverArr=new Array(); function setrollover(OverImgSrc,pageImageName) { if (! document.images)return; if (pageImageName == null) pageImageName = document.images[document.images.length-1].name; rollOverArr[pageImageName]=new Object; rollOverArr[pageImageName].overImg = new Image; rollOverArr[pageImageName].overImg.src=OverImgSrc; } function rollover(pageImageName) { if (! document.images)return; if (! rollOverArr[pageImageName])return; if (! rollOverArr[pageImageName].outImg) { rollOverArr[pageImageName].outImg = new Image; rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src; } document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src; } function rollout(pageImageName) { if (! document.images)return; if (! rollOverArr[pageImageName])return; document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src; } //--> </SCRIPT>
copy the code below again to put a picture on your pages.
<a onmouseover="rollover('home')" onmouseout="rollout('home')" href="http://pcguru.okihelfiska.net"><img alt="PC Guru" src="http://www.okihelfiska.net/data/roll-out.png" border="0" name="home" /></a> <SCRIPT TYPE="text/javascript"> <!-- setrollover("http://www.okihelfiska.net/data/roll-over.png"); //--> </SCRIPT>
Finished, Save your page, and then refresh.
NB: This script will be problematic if used in the BLOG, should only be used on the Website only.
