更改圖片上的每個圖像懸停的圖像？

Question

我有一整頁的圖像這樣的事情，或多或少：

<div class="category"> 
<ul class="grid">       
    <li class="item first"> 
     <a href="/pic1.html" title="PIC1" class="image"><span><img src="/pic1-1.jpg" data-hover="/pic1-2.jpg" width="243" height="243" /></span></a> 
     <h2 class="product-name"><a href="/pic1.html" title="PIC1-1">PIC1</a></h2> 
    </li> 
    <li class="item"> 
     <a href="/pic2.html" title="PIC2" class="image"><span><img src="/pic1.jpg" width="243" height="243" /></span></a> 
     <h2 class="product-name"><a href="/pic2.html" title="PIC2-1">PIC2</a></h2> 
    </li> 


    <li class="item last"> 
     <a href="/pic3.html" title="PIC3" class="image"><span><img src="/pic3-1.jpg" data-hover="/pic3-2.jpg"width="243" height="243" /></span></a> 
     <h2 class="product-name"><a href="/pic3.html" title="PIC3-1">PIC3</a></h2> 
     </li> 
    </ul> 

對於列表中的每個項目，我想有一個第二圖像只顯示在鼠標懸停時，如果另一圖像有已經在html中爲該列表項提供了。

我該如何做到這一點在HTML和相應的JavaScript？

Answer 1

你可以試試這個：

$(function() { 
$('img').each(function() { 
    $(this).data('original', this.src) 
}).mouseenter(function() { 
    $(this) 
     .attr('src', $(this).data('hover')) 
     .animate({ 
     marginTop: 0, 
     marginRight: 0, 
     marginLeft: 0, 
     borderWidth: 10 
    }, 'fast') 
}).mouseleave(function() { 
    $(this) 
     .attr('src', $(this).data('original')) 
    .animate({ 
     marginTop: 20, 
     marginRight: 10, 
     marginLeft: 10, 
     borderWidth: 0 
    }, 'fast') 
}) 
}) 

working fiddle

Answer 2

$(".image").on('hover', function(event) { 
    $(this).attr('src',$(this).next().data('src')); 
} 

上面的代碼將在每次您將鼠標懸停在頁面圖像的一次執行，然後去抓取數據屬性形成下一個元素image：

<image class="image" src="yourock.jpg"> 
<span style="display:none" data-src="yousuck.jpg"></span> 

Answer 3

用普通的JavaScript它會是這樣的： 在頭部分補充一點：

<script language="javascript" type="text/javascript"> 
    function swapimg(img) 
    { 
     /* If second image is not provided stop execution */ 
     if(img.getAttribute('data-hover') == '') return; 

     var currentSRC = img.src; 
     img.src = img.getAttribute('data-hover'); 
     img.setAttribute('data-hover', currentSRC); 
    } 
</script> 

然後在你的代碼中添加的onmouseover和onmouseout

<div class="category"> 
<ul class="grid">       
<li class="item first"> 
    <a href="/pic1.html" title="PIC1" class="image"><span><img src="/pic1-1.jpg" data-hover="/pic1-2.jpg" onmouseover="swapimg(this);" onmouseout="swapimg(this);" width="243" height="243" /></span></a> 
    <h2 class="product-name"><a href="/pic1.html" title="PIC1-1">PIC1</a></h2> 
</li> 
<li class="item"> 
    <a href="/pic2.html" title="PIC2" class="image"><span><img src="/pic1.jpg" width="243" height="243" onmouseover="swapimg(this);" onmouseout="swapimg(this);" /></span></a> 
    <h2 class="product-name"><a href="/pic2.html" title="PIC2-1">PIC2</a></h2> 
</li> 


<li class="item last"> 
    <a href="/pic3.html" title="PIC3" class="image"><span><img src="/pic3-1.jpg" data-hover="/pic3-2.jpg"width="243" height="243" onmouseover="swapimg(this);" onmouseout="swapimg(this);" /></span></a> 
    <h2 class="product-name"><a href="/pic3.html" title="PIC3-1">PIC3</a></h2> 
    </li> 
</ul> 
</div> 

Answer 4

用JavaScript數組，你可以作出這樣

<script> 
var a=0; 
function show_next() 
{ 
var imgg = new Array(); 
imgg[0] = "pic1.jpg"; 
imgg[1] = "pic2.jpg"; 
imgg[2] = "pic3.jpg"; 
if (a>imgg.length-1) 
{ 
a=0; 
} 
document.getElementById("image").src=imgg[a]; 
document.getElementById("show").title=imgg[a]; 
document.getElementById("show").href=imgg[a]; 
document.getElementById("show_2").href=imgg[a]; 
document.getElementById("name_image").innerHTML=imgg[a]; 
a=a+1; 
} 
</script> 

<div class="category"> 
<ul class="grid">       
<li class="item first"> 
<a href="/pic1.html" title="PIC1" class="image" onmouseover="show_next();" id="show"><span><img src="" width="243" height="243" id="image"/></span></a> 
<h2 class="product-name" ><a href="/pic1.html" title="PIC1-1" id="show_2"><span id="name_image">PIC1</span></a></h2> 
</li> 
</ul>