木笛雅設

你一定常看到這種圖片變換的技巧
看似簡單但若不使用語法其實不好表現
而使用getElemntById就能輕鬆完成這樣的效果

目標:製作圖片變換的網頁效果
難度:進階

1.先準備4張小圖做連結icon和4張大圖為連結圖。我習慣用表格排版，建立一個2欄4列的表格，右邊的欄位將它合併，我們稍後放大圖的位置。

2.先把一張大圖插入右邊欄位，點選圖片於出現屬性面板，替該圖片命名flower。


3.接下來在左邊的欄位插入四張小圖，點選第一張小圖出現屬性面板，並於連結處輸入#的符號，這麼做是為了讓游標知道這裡會有script，游標才會變成手指狀。

4.接換到分割模式，圖片保持點選狀態，這樣程式碼中該圖片的語法就會反白。在＜img.....＞的語法中加入以下這一段javascript:
onclick="document.getElementById('flower').src='images/flower1-big.jpg'"
getElementId('name')：就是欲替換圖片的名稱，就是剛剛你命名的地方
src='圖檔位置'：放相對的圖檔存放位置

5.重複這個步驟套用到其他圖片上，記得要改大圖的連結位置就ok囉


示範網頁連結