目指せ!! “ピンとくる” デザイン＆クリエイティブ WORKS

先日仕事でつかったJavaScriptを忘れないうちにメモ。
サムネイル画像をクリックしたら拡大画像が切り替わるという単純なものなのですが、
flash使わなくてもこんなに簡単にできたんでとても助かりました。

まずheadタグ内に
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<SCRIPT type="text/javascript">
<!--
function showimg1(){
     document.area1.src="img/画像1";
}
function showimg2(){
     document.area1.src="img/画像2";
}
function showimg3(){
     document.area1.src="img/画像3";
}
-->
</SCRIPT>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
を入れておいて、

body内のサムネイル部分を
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<a href=”#” onclick=”showimg2()”><img src=”img/画像1″ alt=”xxx” /></a>
<a href=”#” onclick=”showimg2()”><img src=”img/画像2″ alt=”xxx” /></a>
<a href=”#” onclick=”showimg2()”><img src=”img/画像3″ alt=”xxx” /></a>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

そしてbody内の拡大画像部分を
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<img src=”img/画像1″ alt=”xxxxx” name=”area1″ />
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

とすればいいだけなのです。
これだと何枚でも画像が増やせるので便利便利！