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">
// 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]
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("");
var img2 = setToLoadImg("");
function si(imgName,imgNum) {
  //imgNames is set up by the images' construct
<IMG border="0" src="" name="whopic">
<A href="javascript:#"
   onmouseover="si(document.whopic,img1)">Mouse Over Me</A>

Times Viewed: 1

Leave a Reply

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