サムネイルで画像を切り替える簡単な方法
2010-08-20
まず画像を用意。たとえば大きい画像A（A.gif）と画像Aのサムネイル（A_thumb.gif）
大きい画像B（B.gif）と画像Bのサムネイル（B_thumb.gif）
を用意。
大きい画像Aと、画像Aのサムネイル、画像Bのサムネイルを貼ります。
<img src="image/A.gif" /><br /><br />
<img src="image/A_thumb.gif" />
<img src="image/B_thumb.gif" />
これが画像を張っただけの状態。<img src="image/A_thumb.gif" />
<img src="image/B_thumb.gif" />
これを以下のようにちょっと追加するだけ！
<img src="image/A.gif" id="img01" /><br /><br />
<img src="image/A_thumb.gif" onClick="img01.src='http://www.affiliate-fixer.com/image/A.gif'" />
<img src="image/B_thumb.gif" onClick="img01.src='http://www.affiliate-fixer.com/image/B.gif'" />
切り替わる画像に「名前」をつけてあげます。[ id="img01" ] <img src="image/A_thumb.gif" onClick="img01.src='http://www.affiliate-fixer.com/image/A.gif'" />
<img src="image/B_thumb.gif" onClick="img01.src='http://www.affiliate-fixer.com/image/B.gif'" />
イベントを作ります。
「onClick="img01.src='image/A.gif'"」
クリックされたら、img01という名前の画像のsrcを「image/A.gif」に変えてくれっていう意味です。
そしてこれが動作サンプル。小さい画像をクリックすると、大きい画像が切り替わります。
このままでは、サムネイルの上にカーソルを持って来たときも、変化がないのでクリックできると認識してもらいずらいので、サムネイルの上にカーソルが来たら、ポインターになるようにします。
<img src="image/A.gif" id="img01" /><br /><br />
<img src="image/A_thumb.gif" onClick="img01.src='image/A.gif'" style="cursor:pointer;" />
<img src="image/B_thumb.gif" onClick="img01.src='image/B.gif'" style="cursor:pointer;" />
<img src="image/A_thumb.gif" onClick="img01.src='image/A.gif'" style="cursor:pointer;" />
<img src="image/B_thumb.gif" onClick="img01.src='image/B.gif'" style="cursor:pointer;" />
これで完成なのだ！ ちなみにカーソルがサムネイルの上にくるだけで、画像が切り替わった方が便利がいいので、 「onClick」を「onMouseover」 で！
<img src="image/A.gif" id="img01" /><br /><br />
<img src="image/A_thumb.gif" onMouseover="img01.src='image/A.gif'" style="cursor:pointer;" />
<img src="image/B_thumb.gif" onMouseover="img01.src='image/B.gif'" style="cursor:pointer;" />
応用すると、いろいろ使えますので、便利ですよ！<img src="image/A_thumb.gif" onMouseover="img01.src='image/A.gif'" style="cursor:pointer;" />
<img src="image/B_thumb.gif" onMouseover="img01.src='image/B.gif'" style="cursor:pointer;" />
この記事が参考になったら、投票お願いします。 | 投票 |
