代码改变世界

鼠标移上后改变图片的js

2008-06-02 15:52  Wings dark  阅读(2506)  评论(0)  编辑  收藏  举报
 <html>
<head>
<script language="JavaScript">
<!-- hide
// ******************************************************
// Script from Stefan Koch - Voodoo's Intro to JavaScript
//     http://rummelplatz.uni-mannheim.de/~skoch/js/ 
//       JS-book: http://www.dpunkt.de/javascript
//    You can use this code if you leave this message
// ******************************************************
  // ok, we have a JavaScript browser
  var browserOK = false;
  var pics;

// -->
</script>
<script language="JavaScript1.1">
<!-- hide
  // JavaScript 1.1 browser - oh yes!
  browserOK = true;
  pics = new Array();
// -->
</script>
<script language="JavaScript">
<!-- hide
var objCount = 0; // number of (changing) images on web-page

function preload(name, first, second) {  

  // preload images and place them in an array

  if (browserOK) {     
    pics[objCount] = new Array(3);
    pics[objCount][0] = new Image();
    pics[objCount][0].src = first;
    pics[objCount][1] = new Image();
    pics[objCount][1].src = second;
    pics[objCount][2] = name;
    objCount++;
  }
}

function on(name){
  if (browserOK) {
     for (i = 0; i < objCount; i++) {
      if (document.images[pics[i][2]] != null)
        if (name != pics[i][2]) { 
    
          // set back all other pictures
          if (pics[i][0].complete)    ;
            document.images[pics[i][2]].src = pics[i][0].src;
        } else {
            // show the second image because cursor moves across this image
            if (pics[i][1].complete)
              document.images[pics[i][2]].src = pics[i][1].src;
        }
    }
  }
}

function off(){
  if (browserOK) {
     for (i = 0; i < objCount; i++) {
      // set back all pictures
      if (document.images[pics[i][2]] != null) 
        if (pics[i][0].complete)
            document.images[pics[i][2]].src = pics[i][0].src;
    }
  }
}

// preload images - you have to specify which images should be preloaded
// and which Image-object on the wep-page they belong to (this is the first
// argument). Change this part if you want to use different images (of course
// you have to change the body part of the document as well)

preload("img1", "img1f.jpg", "img1t.jpg");
preload("img2", "img2f.gif", "img2t.jpg");
preload("img3", "img3f.jpg", "img3t.jpg");

// -->
</script>
<head>



<body>
<a href="link1.htm" onMouseOver="on('img1')" 
  onMouseOut="off()">
<img name="img1" src="img1f.jpg" 
  width="140" height="120" border="0"></a>

<a href="link2.htm" onMouseOver="on('img2')" 
  onMouseOut="off()">
<img name="img2" src="img2f.gif" 
  width="140" height="120" border="0"></a>

<a href="link3.htm" onMouseOver="on('img3')" 
  onMouseOut="off()">
<img name="img3" src="img3f.jpg" 
  width="140" height="120" border="0"></a>
</body>
</html>