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

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

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

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


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

4.接換到分割模式,圖片保持點選狀態,這樣程式碼中該圖片的語法就會反白。在<img.....>的語法中加入以下這一段javascript:

getElementId('name'):就是欲替換圖片的名稱,就是剛剛你命名的地方
src='圖檔位置':放相對的圖檔存放位置

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


示範網頁連結

創作者介紹

木笛雅設

fennser 發表在 痞客邦 PIXNET 留言(6) 人氣()


留言列表 (6)

發表留言
  • 悄悄話
  • boro
  • 請問 http://blog.pixnet.net/fennser/post/9897046
    onclick="document.getElementById('flower').src='images/flower1-big.jpg'"是這樣貼嗎
    <img src="f1.JPG" width="200" height="100" border="0" /onclick="document.getElementById('fire1').src='images/fire1.jpg'">
  • <img src="f1.JPG" width="200" height="100" border="0" onclick="document.getElementById('fire1').src='images/fire1.jpg'"/>
    建議把img的中指標籤/放在最後面.就是所有的語法包在<img....../>裡面,雖然都能執行只是比較正統.

    fennser 於 2009/01/28 19:14 回覆

  • boro
  • 那大圖第一張做好了 要換第二張 要放在哪裡?把第一張刪掉嗎?
  • 不用ㄚ,放第一張只是讓該網頁預設一進來先看到哪一張大圖而已.要換第二張大圖,只要去點第二張小圖即可.

    fennser 於 2008/01/14 22:41 回覆

  • gemini
  • 可以請教您嗎~
    我到第三個步驟都ok
    第四步驟就有問題
    請問大圖要放在合併儲存格內嗎~那語法是要放在那邊呢!請您指導一下!謝謝
  • 大圖是放在合併儲存格內
    至於語法是放在每張小圖的<img...>語法裡

    fennser 於 2009/06/08 18:22 回覆

  • 君
  • 有關於阻擋視窗

    你好~想請問一下,我在使用語法後,在ie瀏覽器試看時,上方都會出現一小條警示條,需要打開允許才可以讓該功能顯現。為什麼我瀏覽您網頁上的範例就不出會線這樣的阻擋視窗呢?自己做的就會出現。謝謝~
  • 因為你是在自己的電腦預覽,只要有存取電腦資料的動作,都會出現這種警示條,放上網路後就不會有這個問題了。
    在做網頁的時候很多效果是要實際放上網路上看才准喔,尤其如果有放flash更是放到網路上看才會順利正常顯示。

    fennser 於 2010/01/08 12:15 回覆

  • tiloveeat
  • 游標點圖放大

    您好!
    請問如何讓游標不必點圖直接放大,如第二步驟的屬性圖一樣,游標移到圖上自動會放大~
找更多相關文章與討論