Question

需要帮助使用鼠标悬停和鼠标移出预先加载的图像来更改图像。我能够弄清楚预加载，但我无法改变图像。如果有人能帮助我，我将不胜感激。

"use strict";
 var $ = function(id) { return document.getElementById(id); };

window.onload = function preload() {
var image1 = $("image1");           
var image2 = $("image2");           

// preload images 
var links = $("image_list").getElementsByTagName("a");
var i, link, image;
for(i = 0; i < links.length;i++){
    link = links[i];
    image = new Image();
    image.src = link.href;
 }


  // attach mouseover and mouseout events for each image

   image1.mouseover=function(){
       image1=image.src="images/release.jpg";
  };

  image1.onmouseout = function() {
    image1=image.src="images/hero.jpg";

  };


    image2.onmouseover = function() {
    image.src="images/deer.jpg";
};
    image2.onmouseout= function(){
    image.src="images/bison.jpg";
};


};

Answer 1

方法是更改图像对象的.src属性。

Cosine similarity A/B2:1.0

而不是

image1.src="images/release.jpg";

虽然我们通常不用javascript来做。方法是使用CSS，将图像显示为DOM元素的image1=image.src="images/release.jpg";，并在background-image上的同一元素上设置其他background-image。

Answer 2

从我所看到的，您可以在函数preload中创建所有变量，然后尝试从创建它们的函数外部访问它们。

Answer 3

"use strict";
var $ = function(id) { return document.getElementById(id); };

window.onload = function() {
    var image1 = $("image1");           
    var image2 = $("image2");           
    
    // preload images 
    var links = $("image_list").getElementsByTagName("a");
    var i, link, image;
    for(i = 0; i < links.length; i++){
		link = links[i];
		image = new Image();
		image.src = link.href;
	}

    // attach mouseover and mouseout events for each image
    image1.onmouseover = function() {
        image1.src = "images/release.jpg";
    };
    image1.onmouseout = function() {
        image1.src = "images/hero.jpg";
    };
    
    image2.onmouseover = function() {  
        image2.src="images/deer.jpg";
    };
    image2.onmouseout = function() {
        image2.src="images/bison.jpg";
    };
};

Answer 4

"use strict";
var $ = function(id) { return document.getElementById(id); };

window.onload = function() {
    var image1 = $("image1");           
    var image2 = $("image2");           
    
    // preload images 
    var links = $("image_list").getElementsByTagName("a");
    var i, link, image;
    for(i = 0; i < links.length; i++){
		link = links[i];
		image = new Image();
		image.src = link.href;
	}

    // attach mouseover and mouseout events for each image
    image1.onmouseover = function() {
        image1.src = "images/release.jpg";
    };
    image1.onmouseout = function() {
        image1.src = "images/hero.jpg";
    };
    
    image2.onmouseover = function() {  
        image2.src="images/deer.jpg";
    };
    image2.onmouseout = function() {
        image2.src="images/bison.jpg";
    };
};

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 90%;
    background-color: white;
    width: 790px;
    margin: 0 auto;
    border: 3px solid blue;
    padding: 1em;
}
h1 {
    color: blue;
    margin: 0;
    padding: 0;
    text-align: center;
}
p {
    margin: 0;
    padding: .5em 0;
    text-align: center;	
}
ul { 
    display: none; 
}

<!DOCTYPE html>
<html>
<head>
  <title>Image Rollover</title>
  <link rel="stylesheet" type="text/css" href="rollover.css">
  <script type="text/javascript" src="rollover.js"></script>
</head>

<body>
    <main>
        <h1>Fishing Images</h1>
        <p>Move your mouse over an image to change it and back out of the
            image to restore the original image.</p>
        <ul id="image_list">
            <li><a href="images/release.jpg" title="Catch and Release"></a></li>
            <li><a href="images/deer.jpg" title="Deer at Play"></a></li>
            <li><a href="images/hero.jpg" title="The Big One!"></a></li>
            <li><a href="images/bison.jpg" title="Grazing Bison"></a></li>
        </ul>
        <p>
            <img id="image1" src="images/hero.jpg" alt="">
            <img id="image2" src="images/bison.jpg" alt="">
        </p>
    </main>
</body>
</html>

在Javascript中使用鼠标悬停更改图像

4 个答案: