изменить изображение на hover для каждого изображения в галерее?

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')); 
} 

Код выше будет выполняться каждый раз, когда вы наведете один из образов страницы, а затем fetchs приписывать данные образуют следующий элемент из этого 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>