Обмен изображениями при наведении миниатюр?

Question

http://visually -minded.com / портфель-project.php

По приведенной выше ссылке, когда пользователь наводит курсор на любой эскиз, основное изображение будет поменяно местами. Кто-нибудь сможет указать мне правильное направление для учебника для этого?

Answer 1

с 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 2

в jQuery вы можете сделать это:

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

    });
 }); 

Как указано здесь, в jsFiddle .

Answer 3

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

Я не знаю, как вы определяете новый источник для изображения, но это в значительной степени путь. Кроме того, вы, вероятно, захотите использовать each () на каждом изображении, а внутри определить «newsrc».

Answer 4

Вот мертвая простая реализация только для CSS, если вам не нравится javascript:

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

Answer 5

Здесь используется при нажатии.

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

только что просмотрел код.Но должно быть что-то вроде того, что вы ищете