Mouse Over – Image Appears

[Total: 0    Average: 0/5]

This shows how to mouse over an item (HREF in this case) and have it change an image, and upon a mouse-out restore the image to it’s first image.

Body Code:

<SCRIPT type="text/javascript">
onload="loadImgs()"
// image construct begin
var imgArray = new Array()
var imgNames = new Array()
function loadImgs() {
  var i=0;
  while (i<imgNames.length) {
    imgArray[i]     = new Image()
    imgArray[i].src = imgNames[i]
	i++
  }
}
function setToLoadImg(imgName) {
  var nextNum       = imgNames.length
  imgNames[nextNum] = imgName
  return nextNum
}
function setImg(x,y) {
  document.images[x].src = imgArray[y].src
}
// image contruct end
var img1 = setToLoadImg("http://www.js-examples.com/js/pic2.gif");
var img2 = setToLoadImg("http://www.js-examples.com/js/pic1.gif");
function si(imgName,imgNum) {
  //imgNames is set up by the images' construct
  imgName.src=imgNames[imgNum]
}
</SCRIPT>
<IMG border="0" src="http://www.js-examples.com/js/pic1.gif" name="whopic">
<A href="javascript:#"
   onmouseout="si(document.whopic,img2)"
   onmouseover="si(document.whopic,img1)">Mouse Over Me</A>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *