設計筆記本

資料來源：興奇購物網商品介紹頁的原始碼 http://buy.yahoo.com.tw/

成果

 

1、新增 JavaScript

隨著圖片的多寡來增加 function 的設定

<script language=javascript>
function inpic1() { document.mypic.src=document.n1.src }
function inpic2() { document.mypic.src=document.n2.src }
function inpic3() { document.mypic.src=document.n3.src }
</script>

2、設定HTML

依據所需要的圖片設定對應圖片值

<div>
<!-- 一開始要顯示的圖片 -->
<div style="float:left;">
<img src="a_a018_01.jpg" alt="" name="mypic" width="300" height="300" id="mypic">
</div>

<!-- 圖片列表 -->
<div style="float:left;">
<div><img src="a_a018_01.jpg" width=70 height=70 alt="" name=n1 id=n1 onmouseover=inpic1()></div>
<div><img src="a_a018_02.jpg" width=70 height=70 alt="" name=n2 id=n2 onmouseover=inpic2()></div>
<div><img src="a_a018_03.jpg" width=70 height=70 alt="" name=n3 id=n3 onmouseover=inpic3()></div>
</div>
</div>