マウスを使った画像の切替 《改》 ※【jQuery】

◆クリックすると画像が切り替わる

※左の小さい画像をクリックすると、大きい画像が差し替わる

★js側

$(function(){
$("#main_img li a").click(function(){
$("#img_in img").attr("src",$(this).attr("href"));
return false;
    });
});

＜a＞タグのhrefに飛んでしまわないために、命令した後で、
return false;といれる。※注：リンクが二つの場合は、二つ必要。

普通にjsをかいていくと、とっても長くなってしまうので、
みじかくするために＄（this）を使う。

★HTML側

<h1>ただの画像切り替え</h1>
<ul>
<li><a href="img/img01_w.jpg"><img src="img/navi01.gif" ></a></li>
<li><a href="img/img02_w.jpg"><img src="img/navi02.gif" ></a></li>
<li><a href="img/img03_w.jpg"><img src="img/navi03.gif" ></a></li>
</ul>

<p id="img_in"><img src="img/img03_w.jpg" width="200" height="150" alt=""></p>

クリックする画像のリンク先を差し替える画像にする。

◆マウスが上にくるときにアニメーションっぽく画像が切り替わる

※左の小さい画像にマウスがくると、大きい画像が差し替わる

*考え方*

→画像を重ねて、手前を薄くする。

★HTML側　※上の切替と同じ

<h1>ただの画像切り替え</h1>
<ul>
<li><a href="img/img01_w.jpg"><img src="img/navi01.gif" ></a></li>
<li><a href="img/img02_w.jpg"><img src="img/navi02.gif" ></a></li>
<li><a href="img/img03_w.jpg"><img src="img/navi03.gif" ></a></li>
</ul>

<p id="img_in"><img src="img/img03_w.jpg" width="200" height="150" alt=""></p>

★CSS側 ※画像を重ねる

#img_in{
position:relative;
}

#img_in img{
position:absolute;
left:0;
top:0;
}

★js側

$(function(){
$("#main_img li a").mouseover(function(){
$("#img_in img").before("<img src='"+$(this).attr("href")+"' >");
$("#img_in img:last").fadeOut("fast",function(){$(this).remove()});
}).click(function(){return false});
});

マウスが上にきたら、大きい画像の前にそのリンク先（href）の画像をいれてね、そんでもって、後ろにあるのを薄くしてね、したら消して、小さい画像をクリックしてもリンクさきにとばさないでね。の意。

mouseover…マウスが上にきたら
before…前に追加
fadeOut…フェードアウト　※ページ一番下

↑詳しくはｺﾁﾗ

※画像の重なり方が前から下になっていくので最後の画像（:last）をつかう。

◆fadeInとfadeOut（透明度）

fadeIn…だんだん表示
fadeOut…だんだん非表示

-----------------------------------＜例＞----

＄（"セレクタ"）.fadeOut（”スピード””コールバック関数”）；

---------------------------------------------


▼スピードについて
早い（fast）、普通（特に指定なし・normal）、遅い（slow）

→コールバック関数とは？