Bildwechsel durch Miniaturbild-Hover?

Question

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

Auf dem obigen Link, wenn der Benutzer über eine Miniaturansicht schwebt, wird das Hauptbild vertauscht. Könnte mir jemand in die richtige Richtung für ein Tutorial dafür zeigen?

Answer 1

Hier wird es mit einem Klick verwendet.

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

sah nur über den Code. Aber sollte so etwas wie das, was Sie

Answer 2

mit html Suche:

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

und einem Skript:

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

Answer 3

Hier ist eine tote einfache CSS-only Implementierung, wenn Sie mit Javascript nicht wohl :

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

Ich weiß nicht, wie Sie die neue Quelle für das Bild definieren, aber das ist so ziemlich der Weg zu gehen. Darüber hinaus möchten Sie wahrscheinlich jedes() auf jedem Bild verwenden und innen das 'Newsrc' definieren.

Answer 5

in jQuery können Sie dies tun:

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

    }); 
}); 

Als exampled here in jsFiddle.