更改图片上的每个图像悬停的图像？

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>