jquryを利用した画像切り替え

質問

jqury(1.3)を利用しマウスオーバー,アウトで画像切り替えを行おうとしています。
マウスオーバーで特定の箇所に画像入れ替えする事はできたのですがマウスアウトで最初の画像に
戻すにはどうすればいいのでしょうか？具体的には・・・

<div><img id="target" src="最初の画像" /></div>
<div class="thumbnail">
//以下の画像はマウスオーバーでtargetに拡大表示、マウスアウトで拡大画像を消し最初の画像に戻したい
<a href="1の拡大"><img src="1の縮小" /></a>
<a href="2の拡大"><img src="2の縮小" /></a>
<a href="3の拡大"><img src="3の縮小" /></a>
</div>

という具合です。jsは以下のようにしたところマウスオーバーで切り替えは可能になったのですが戻すことができない状態です。

.hover(
function(){// マウスオーバー時
$(this).fadeTo(200, 1.0);
var changeSrc = $(this).attr("href");
$("#target").attr("src", changeSrc);
},
function(){// マウスアウト時
$(this).fadeTo(500, 0.8);
//ここで戻す処理をすると思うのですが方法がわかりません
}
)

詳しい方がいらっしゃいましたら宜しくお願い致します。

回答No.3

x_jouet_x

> 拡大画像切り替え時にfadeToを適用するにはどうすればいいものか教えて頂けないでしょうか？

$(this).fadeTo(200, 1.0);
の箇所を
$("#target").fadeTo(200, 1.0);
のように書き換えればいいのですが、これだけだと恐らく期待されている動作にはならないと思います。

下記にそれっぽく動作するJavaScriptを貼っておきます。
----------
$(document).ready(function() {
var originSrc = $("#target").attr("src");

$("a").hover(
function(){// マウスオーバー時
var changeSrc = $(this).attr("href");
$("#target").fadeTo(200, 0.5, function() {
$("#target").attr("src", changeSrc);
});

$("#target").fadeTo(200, 1.0);
},
function(){// マウスアウト時
$("#target").fadeTo(200, 0.5, function() {
$("#target").attr("src", originSrc);
});

$("#target").fadeTo(200, 1.0);
}
);
});
----------

お礼

何度もお返事頂き本当にありがとうございます。
やってみたところ思うような動作でした^^ブラウザの仕様なのかff3では問題ないのですがie8では
サムネイルの『fade To』がうまく動作していない模様です。(拡大部分は問題ないです。)

ちなみにソースです。若干変更はしていますがおかしなところなどありますでしょうか？

$(document).ready(function() {

var originSrc = $("#target").attr("src"); // src属性の初期値

$(".thumbnail a")
// 読み込み時
.fadeTo(1, 0.8)

.hover(
function() {// マウスオーバー時
$(this).fadeTo(500, 1.0);
var changeSrc = $(this).attr("href");
$("#target").fadeTo(300, 0.8, function() {
$("#target").attr("src", changeSrc);
});
$("#target").fadeTo(300, 1.0);
},
function() {// マウスアウト時
$(this).fadeTo(500, 0.8);
$("#target").fadeTo(300, 0.8, function() {
$("#target").attr("src", originSrc);
});
$("#target").fadeTo(300, 1.0);
}
)

// クリック時
.click( function() {
return false;
});

});

また拡大画像は400×300px程度で然程大きなサイズではないのですが拡大画像切り替え表示の際に
カクカク感が気になるところです。。。

サムネイルにマウスを合わせ1回拡大画像に切り替えると次回からはスマートなのですが
拡大画像の先読み？などで対処するべきでしょうか？それにしてもjquery面白いです^^

回答No.2

x_jouet_x

回答#1の補足です。

fadeTo()関数は<img id="target" />の画像切り替えではなく、サムネイル画像に対して行っているんですね。
そうであれば回答#1に書かせて頂いた記述で結構です。

お礼

何度もすみません。追記です。以下でうまくクリック時の処理をできました！単純な文法ミスだったようで^^;
.click( function() {
return false;
});
拡大画像切り替え時にfadeToを適用するにはどうすればいいものか教えて頂けないでしょうか？
宜しくお願い致します。

補足

お返事ありがとうございます。
>fadeTo()関数は<img id="target" />の画像切り替えではなく、サムネイル画像に対して行っているんですね。
サムネイルも必要なのですが本当はtargetの切り替えに使用したかったのですが方法がわからず
このようになってしまいました^^;

おかげ様でうまく動作していたのですがクリック時の処理を追加したところなぜか動作しなくなってしまいました。

$(document).ready(function() {

var originSrc = $("#target").attr("src"); // src属性の初期値

$("a").hover(

function() {// マウスオーバー時
$(this).fadeTo(200, 1.0);
var changeSrc = $(this).attr("href");
$("#target").attr("src", changeSrc);
},
function() {// マウスアウト時
$(this).fadeTo(500, 0.8);
$("#target").attr("src", originSrc);
}

});

// クリック時(追加)
$("a").click(
function() {
return false;
}
});

});

簡単な事なのかもしれないのですが何度か試してみましたが全く動作せず状態です。
知識もなく原因がわからないのですがこの場合はどのようにすればいいのでしょうか？

回答No.1

x_jouet_x

マウスオーバー時に、<img id="target" />のsrc属性値が書き換えられてしまうので、hover()関数の外で<img id="target" />のsrc属性の初期値を変数に保持しておく必要があります。

以下、それを踏まえたJavaScriptソースです。
----------
$(document).ready(function() {
var originSrc = $("#target").attr("src"); // src属性の初期値

$("a").hover(
function(){// マウスオーバー時
$(this).fadeTo(200, 1.0);
var changeSrc = $(this).attr("href");
$("#target").attr("src", changeSrc);
},
function(){// マウスアウト時
$(this).fadeTo(500, 0.8);
$("#target").attr("src", originSrc);
}
);
});
----------

なお、画像切り替え時にfadeTo()関数を使用されているようですが、この場合はまた違う書き方になります。