イメージサムネイルの上にスワップする？

Question

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

上記のリンクでは、ユーザーがサムネイルの上を移動すると、メイン画像がスワップされます。誰かがこれについてのチュートリアルの正しい方向に私を指すことができるだろうか？

Answer 1

ここではクリック時に使用されます。

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

わずかのコードを見ました。しかし、あなたがHTMLで

Answer 2

を探しているもののようなものでなければなりません：

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

とスクリプト：あなたはjavascriptのに慣れていない場合

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

Answer 3

ここでは死んでシンプルなCSSのみの実装であります：

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をexampled。