HTML + JavaScript：如何在懸停時更改圖像源？

Question

我的ul里面有5 li，而ul的范圍是6：

<div class="coffee-span-6 recent-news-list">
 <ul class="unorder-list news-item-list">
  <li class="news-item"><a href="#">Lorem Ipsum</a></li>
  <li class="news-item"><a href="#">Lorem Ipsum</a></li>
  <li class="news-item"><a href="#">Lorem Ipsum</a></li>
  <li class="news-item"><a href="#">Lorem Ipsum</a></li>
  <li class="news-item"><a href="#">Lorem Ipsum</a></li>
 </ul>
</div>

然后另一個跨度6和一個圖像：

<div class="coffee-span-6 recent-news-col">
    <img id="image" src="http://lorempixel.com/460/200/abstract/1"
</div>

我希望它像是，當我將鼠標懸停在第一個li上時，它會更改圖像源，然后在懸停時，它會恢復為原始圖像。 我嘗試了這個：

<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();"> <-- this is first li

對於腳本：

<script>
  function changeImage(){
            document.getElementById("image").src="http://lorempixel.com/460/200/abstract/2";
} 
function revertImage(){
        document.getElementById("image").src="http://lorempixel.com/460/200/abstract/1";
}

我的意思是，它可以工作，但是如果我在另一個li上實現onmouseover和onmouseout：

<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();">
<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();">
<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();">
<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();">
<li class="news-item" onmouseover="changeImage();" onmouseout="revertImage();">

我想根據 li更改圖像，我該怎么做？ 我認為讓每個li使用不同的方法不是非常有效...是否可以通過使用更多JavaScript或JQuery來做到這一點？

Answer 1

通過參數將圖像的URL傳遞給函數：

<li class="news-item" onmouseover="changeImage('http://foo.com/img1.jpg');" onmouseout="revertImage('http://foo.com/imgBase.jpg');">
<li class="news-item" onmouseover="changeImage('http://foo.com/img2.jpg');" onmouseout="revertImage('http://foo.com/imgBase.jpg');">
<li class="news-item" onmouseover="changeImage('http://foo.com/img3.jpg');" onmouseout="revertImage('http://foo.com/imgBase.jpg');">
<li class="news-item" onmouseover="changeImage('http://foo.com/img4.jpg');" onmouseout="revertImage('http://foo.com/imgBase.jpg');">
<li class="news-item" onmouseover="changeImage('http://foo.com/img5.jpg');" onmouseout="revertImage('http://foo.com/imgBase.jpg');">

接着：

  function changeImage(imgSrc){
      document.getElementById("image").src=imgSrc;
  } 
  function revertImage(imgSrc){ 
      document.getElementById("image").src=imgSrc;
  }

Answer 2

您可能會想到以這種方式向li添加data-屬性：

<div class="coffee-span-6 recent-news-list">
  <ul class="unorder-list news-item-list">
    <li class="news-item" data-item="1"><a href="#">Lorem Ipsum</a></li>
    <li class="news-item" data-item="2"><a href="#">Lorem Ipsum</a></li>
    <li class="news-item" data-item="3"><a href="#">Lorem Ipsum</a></li>
    <li class="news-item" data-item="4"><a href="#">Lorem Ipsum</a></li>
    <li class="news-item" data-item="5"><a href="#">Lorem Ipsum</a></li>
  </ul>
</div>

您可以使用以下方法控制圖像源：

$(function () {
    // Grab all the news items.
    $(".news-item").hover(function () {
        // Replace with new image.
        $("#img-" + $(this).data("item")).data("src", $("#img-" + $(this).data("item")).attr("src"));
        $("#img-" + $(this).data("item")).attr("src", "new-" + $(this).data("item") + ".png");
    }, function () {
        // Reset the old image.
        $("#img-" + $(this).data("item")).attr("src", $("#img-" + $(this).data("item")).data("src"));
    });
});

上面的代碼適用於所有圖像，例如：

<img src="" alt="" id="img-1" />
<img src="" alt="" id="img-2" />
<img src="" alt="" id="img-3" />
<img src="" alt="" id="img-4" />
<img src="" alt="" id="img-5" />

並帶有一個圖像：

$(function () {
    // Grab all the news items.
    $(".news-item").hover(function () {
        // Replace with new image.
        $("#image").data("src", $("#image").attr("src"));
        $("#image").attr("src", "new-" + $(this).data("item") + ".png");
    }, function () {
        // Reset the old image.
        $("#image").attr("src", $("#image").data("src"));
    });
});

希望您可以以此為起點來做自己的事情。

Answer 3

為什么不使用CSS？

a {
    background-image:url('myimage.jpg');
  }

a:hover {
    background-image:url('myotherimage.jpg');
}

如果需要將其保留在html文件中，請使用內聯樣式（不是最佳途徑）。