◆クリックすると画像が切り替わる
※左の小さい画像をクリックすると、大きい画像が差し替わる
★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）
→コールバック関数とは？
