最近有個案子

因為產品數量附件較多

想要製作類似 博客來網路書局 產品圖片 樣式

Snap1.jpg 

找了許多網路資料 看了一下 還不難設計

可以看看雞蛋貓製作的 還不錯吧

Snap1.jpg 

只要將下列程式 貼到 <body></body>之間即可

<script language="javascript" type="text/javascript">function view(t){switch(t){case 1: document.getElementById("img").innerHTML = '<img src="http://rp1.monday.vip.tw1.yahoo.net/res/gdsale/st_pic/2433/st-2433736-s200.jpg" style="border:4px solid #FFF;">';break;case 2: document.getElementById("img").innerHTML = '<img src="http://p2.p.pixnet.net/albums/userpics/2/3/639323/1203763123.jpg" style="border:4px solid #FFF;">';break;case 3: document.getElementById("img").innerHTML = '<img src="http://rp1.monday.vip.tw1.yahoo.net/res/gdsale/st_pic/2421/st-2421467-s200.jpg" style="border:4px solid #FFF;">';break;case 4: document.getElementById("img").innerHTML = '<img src="http://rp1.monday.vip.tw1.yahoo.net/res/gdsale/st_pic/2437/st-2437080-s200.jpg" style="border:4px solid #FFF;">';break;case 5: document.getElementById("img").innerHTML = '<img src="http://rp1.monday.vip.tw1.yahoo.net/res/gdsale/st_pic/2421/st-2421563-s200.jpg" style="border:4px solid #FFF;">';break;}}</script>
<div id="img"><img src="http://rp1.monday.vip.tw1.yahoo.net/res/gdsale/st_pic/2421/st-2421466-s200.jpg" style="border:4px solid #FFF;" /></div>
<p><a href="#" onmouseover="javascript:view(1)"><img src="http://rp1.monday.vip.tw1.yahoo.net/res/gdsale/st_pic/2421/st-2421466-s60.jpg" style="border:2px solid #FFF;" /></a><a href="#" onmouseover="javascript:view(2)"><img src="http://rp1.monday.vip.tw1.yahoo.net/res/gdsale/st_pic/2421/st-2421563-s60.jpg" style="border:2px solid #FFF;" /></a><a href="#" onmouseover="javascript:view(3)"><img src="http://rp1.monday.vip.tw1.yahoo.net/res/gdsale/st_pic/2437/st-2437080-s60.jpg" style="border:2px solid #FFF;" /></a><a href="#" onmouseover="javascript:view(4)"><img src="http://rp1.monday.vip.tw1.yahoo.net/res/gdsale/st_pic/2422/st-2422583-s60.jpg" style="border:2px solid #FFF;" /></a><a href="#" onmouseover="javascript:view(5)"><img src="http://rp1.monday.vip.tw1.yahoo.net/res/gdsale/st_pic/2433/st-2433736-s60.jpg" style="border:2px solid #FFF;" /></a></p>

 

 

藍色部分 為大圖

紅色部分 是小圖onmouseover的寫法，如果需要onclick小圖 則需<a href="#" onmouseover="javascript:view(1)">

改成  <a href="javascript:view(1)">

 

 

arrow
arrow
    全站熱搜

    雞蛋貓異想世界 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄