Image Swap by thumbnail hover?

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

Я не знаю, как вы определяете новый источник изображения, но это в значительной степени путь. Кроме того, вы, вероятно, захотите использовать каждый() на каждом изображении и внутри определить «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"); 

    }); 
}); 

Как exampled here in jsFiddle.