图像通过缩略图悬停切换？

Question

http://visually-minded.com/portfolio-project.php

在上面的链接中，当用户将鼠标悬停在任何缩略图上时，主图像将被交换。任何人都可以指出我正确的方向为这个教程？

Answer 1

这里使用它点击。

http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails

只是过来看了代码。但是，应该像你正在寻找

Answer 2

与HTML：

<img id="target" src="full_img_name1"/> 
<a href="full_img_name1"><img src="thumb1"/></a> 
<a href="full_img_name2"><img src="thumb2"/></a> 
<a href="full_img_name3"><img src="thumb3"/></a> 

和脚本：

$("a img").hover(function(){ 
    var img = $(this).closest('a').attr('href'); 
    $('#target').show().attr('src',img); 
},function(){ 
    $('#target').hide().attr('src',''); 
}); 

Answer 3

这里是一条走不通的简单的CSS中的实现，如果你不舒服的JavaScript ：

http://www.cssplay.co.uk/menu/gallery4.html

Answer 4

$(element).hover(
    function() { $(this).data('original', $(this).attr('src')).attr('src', newsrc), 
    function() { $(this).attr('src', $(this).data('original') 
); 

我不知道如何定义图像的新源，但这是相当多的路要走。另外，你可能想在每个图像上使用each（），并在里面定义'newsrc'。

Answer 5

在jQuery的你可以这样做：

$(function() { 
$('#myImage-hover').hover(function() { 
    $('#myImage').attr("src","path-to-file/img.png");}, function() { 
    $('#myImage').attr("src","path-to-file/img_2.png"); 

    }); 
}); 

由于所示例here in jsFiddle。