こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

jqueryについて

サムネイルをマウスオーバーすると#targetに拡大画像を表示するものなのですがマウスオーバーで
切り替わりマウスアウトで元に戻るとこまではいいのですがフェードが全く効きません。

いろいろ試したところ$(".thumbnail a img")に変えるとフェードはするのですが今度は画像が
切り変わらなくなってしまいす。両者実装するにはどのように書き換えればいいのでしょうか?

$(document).ready(function() {
var originSrc = $("#target").attr("src");
$(".thumbnail a")
.fadeTo(1,1)
.hover(
function() {
var changeSrc = $(this).attr("href");
$("#target").attr("src", changeSrc);
$(this).fadeTo(200, 0.5);
},
function() {
$("#target").attr("src", originSrc);
$(this).fadeTo(500, 1);
}
)
});

投稿日時 - 2009-11-24 04:12:47

QNo.5471555

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

回答がないみたいなので…

jqueryはよく知らないのと、ソースが不明なのでよくわかりませんが、ひょっとしてこういうこと?
$(document).ready(function() {
$(".thumbnail a").each(function(){
var originSrc = $("#target").attr("src");
$(this).hover(
function(){
$("#target").attr("src", $(this).attr("href"));
$(this).fadeTo(200, 0.5);
},
function(){
$("#target").attr("src", originSrc);
$(this).fadeTo(500, 1);
});
});
});

HTMLソースはこんなの(↓)を想定
リンクタグの目的がわかりませんが、このままだと画像をクリックするとその画像にリンクしてしまうのでは?
<html>
<head>
<style type="text/css">
img#target { width:500px; height:300px; }
.thumbnail img { width:125px; height:75px; }
</style>
</head>
<body>
<img id="target" src="A.jpg">
<div class="thumbnail">
<a href="B.jpg"><img src="B.jpg"></a>
<a href="C.jpg"><img src="C.jpg"></a>
<a href="D.jpg"><img src="D.jpg"></a>
</div>
</body>
</html>

投稿日時 - 2009-11-24 18:19:14

あなたにオススメの質問