◆クリックすると画像が切り替わる
![クリックすると画像が切り替わる](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEZBIw5cdD2AsM-lNwh5gLgMFR7i5JTqNL10TrzZuf_ez5NaRFiQpZXxL32rBAmQHNS_-q8PGb1o-xQNzd_uHnHsNItNUIXJu6QpgXk4iQvH9vpjZNaKzj3Mv0tDprV7IlocaA_4Mod7U/s1600/20120112.png)
※左の小さい画像をクリックすると、大きい画像が差し替わる
★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>
クリックする画像のリンク先を
差し替える画像にする。
◆マウスが上にくるときにアニメーションっぽく画像が切り替わる
![マウスが上にくるときにアニメーションっぽく画像が切り替わる](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFtBsXXzg-CiUcFKx_eMfvAbmnRGeiDusz9Gy-5aywfdOPqBY_R3Ln-viwP5oP1oaGQ95KF_RTR90PCWyoeElAWOYFEl-AQfxQdik2xogG7mNENK9rHaA7StUinizrCRXnPQ_KLAHc3Pc/s1600/20120112_2.png)
※左の小さい画像にマウスがくると、大きい画像が差し替わる
*考え方*
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfU23J1gwUFGQeWuzfZvqfN2ThMFDoRe2NrS95nm7pXggv5oBN5BmWtvM3bBfFQJelvZ9jclIZI2U9Iu1AxyAFvWfeZQBXu1cI8Jtx-fdZ76eI3Dt2R5v5cWeor_E4Q-QSyhzakpxl6f8/s1600/20120112_3.png)
→画像を重ねて、手前を薄くする。
★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)
→コールバック関数とは?