Question

我一直在线阅读文章，观看YouTube视频 - 我迷路了。这是我尝试过的最后一段代码，当你读到这篇文章时，现在可能已经改变了。它看起来很简单，我不明白我做错了什么？我的想法不会抓住这个。有帮助吗？当鼠标悬停在图像上时，我试图用（id）中的图像替换图像（src）。现在，当我将鼠标悬停在图像上时，我真的只是想要发出警报。什么！

****更新代码****

这只是！我是个白痴。 Javascript文件没有正确定向，缺少子文件夹。仍然在苦苦挣扎，但现在至少我的翻转工作正在发挥作用。掌心前额

HTML：

<!DOCTYPE HTML>
    <html lang="en">
    <head>
<meta charset="utf-8">
<title>Image Rollovers</title>
<link rel="stylesheet" href="styles/main.css">
<script src="js/rollover.js"></script>
    </head>

    <body>
    <h1>Rollover Test</h1>
    <ul id="rollover_test">
        <li>
            <img src="images/h1.jpg" alt="img1" id="images/h4.jpg" onmouseover="MouseOver('img1');" onmouseout="MouseOut('img1')">
        </li>
        <li>
            <img src="images/h2.jpg" alt="img2" id="images/h5.jpg">
        </li>
        <li>
            <img src="images/h3.jpg" alt="img3" id="images/h6.jpg">
        </li>
    </ul>        
    </body>
    </html>

Javascript：

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

function MouseOver(id){ 
// I'm trying to figure out the syntax in here to swap the id and src tags
alert($("id").src);

};

function MouseOut(id){
alert("out");
}

window.onload = function () {
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i=0; i<links.length; i++) {
    links = links[i];
    image = new Image();
};
};

Answer 1

实际上，这些简单的三行代码足以使其工作。

$("img").on('mouseenter', function() {
  $(this).attr("src", $(this).attr('id'));
});

img {
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Rollover Test</h1>
<ul id="rollover_test">
  <li>
    <img src="http://hd-wall-papers.com/images/wallpapers/stock-image/stock-image-15.jpg" alt="Img1" id="http://studio7designs.com/wp-content/uploads/free-stock-nature-photos.jpg">
  </li>
  <li>
    <img src="http://studio7designs.com/wp-content/uploads/free-stock-nature-photos.jpg" alt="Img2" id="http://www.jfcsmonmouth.org/Resources/Pictures/investing-in-stocks3---ticker-symbols_s600x600.jpg">
  </li>
  <li>
    <img src="http://www.jfcsmonmouth.org/Resources/Pictures/investing-in-stocks3---ticker-symbols_s600x600.jpg" alt="Img3" id="http://hd-wall-papers.com/images/wallpapers/stock-image/stock-image-15.jpg">
  </li>
</ul>

Answer 2

在您的HTML中，id属性已更改为data-id，因为最好保留id属性以进行css识别。

通过合作使用mouseenter和mouseleave，以下代码段会查看遇到的每个图像，并将其src属性转换为附加到该图像的临时data-temp属性。

希望片段评论是不言自明的。

$("li").find('img').on({
  mouseenter: function() {
    $this = $(this); // get the current img object
    var src = $this.attr('src'), // get the current src
      id = $this.attr('data-id'); //get the alternative src
    $this.data('temp', src); // store in a new temporary data attribute
    $this.attr('src', id);
  },
  mouseleave: function() {
    var temp = $(this).data('temp'); // lookup temp
    $(this).attr('src', temp); // swap image back
  }
})


/*

var $ = function(id) {
  return document.getElementById(id);
};

function MouseRollover(img) {
  alert("made it");
  var oldIMG = $(this).attr("src");
  var newIMG = $(this).attr("id");
};

window.onload = function() {
    //preload images
    var links = document.getElementsByTagName("li");
    var i, link, image;
    for (i = 0; i < links.length; i++) {
      links = links[i];
      image = new Image();
    }
    //rollover
    $("li").on('mouseenter', function() {
          alert("yep");
        });
        
     }

*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Rollover Test</h1>
<ul id="rollover_test">
  <li>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSm2etjS8VnJRwuZA8ormtAyPrIt8x0twLr-APiGwrkcX8NXe3P" alt="Img1" data-id="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ-W40Oxb_QCTaGT9MVgTuXaDxacAKgChfvATaS9KffbHfGc16n">
  </li>
  <li>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTp6eZg_pJb0_NFxdaFYSnqMzPMJc-R_iwp2x8HarvdKzoNaCXv" alt="Img2" data-id="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSwvO67upMvk1q3MicNCujQ67D2EgJf8HyVA36FqM9qrv2B4Mue">
  </li>
  <li>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREN8xal0JlNdcPcz-94kQqZ8t3uBWEfm3T4LWpPY5PhX7qndGp" alt="Img3" data-id="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT07dVJl5ghqji58Su7Gs9RuSuCgleBDUITx2Dngh3ibVWzLfde">
  </li>
</ul>

Answer 3

*已解决*

一旦我发现我的javascript没有正确链接，那只是玩语法的问题。超级容易。我是个白痴。

HTML

        <ul id="image_rollovers">
        <li>
            <img src="images/h1.jpg" alt="images/h4.jpg" id="img1" onmouseenter="MouseEnter('img1');" onmouseout="MouseOut('img1')">
        </li>
        <li>
            <img src="images/h2.jpg" alt="images/h5.jpg" id="img2" onmouseenter="MouseEnter('img2');" onmouseout="MouseOut('img2')">
        </li>
        <li>
            <img src="images/h3.jpg" alt="images/h6.jpg" id="img3" onmouseenter="MouseEnter('img3');" onmouseout="MouseOut('img3')">
        </li> 
    </ul>

JAVASCRIPT

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

function MouseEnter(id){
var img = $(id);
originalURL = img.src;
var newURL = img.alt;

img.src = newURL;
};

function MouseOut(id){
var img = $(id);

img.src = originalURL;
}

window.onload = function () {
var originalURL;
//preload images
var links = document.getElementsByTagName("li");
var i, link, image;
for (i=0; i<links.length; i++) {
    links = links[i];
    image = new Image();
};
};

像魅力一样。

全部，谢谢您的提示和建议。

MouseEnter / MouseOut事件

3 个答案: