一般的購物網站都有製作此機制,否則,使用者在購物中都只能看到小圖而看不到細節的顯示時,難免會對該商品的認知、品質產生懷疑、不安全感而不敢購買,自然而然地便損失了商機!
若我們製作此效果該用什麼樣方式來做呢?答案是 Javascript 、 jQuery ,誠如前篇所描述的一樣,若是不會撰寫 Javascript 不就挫咧蛋!現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的問題。
接下來,我們就開始使用 Dreamweaver 行為來製作我們所需要的調換影像。
請各位先了解一下待會兒要控制的區塊,如下圖所示:
- 請為元素加上 id 以便 Javascript 可以尋找到其 id 並予以控制。
- 選取控制元素。
- 選擇所需的行為指令。
- 選擇或輸入參數。
請為元素加上 id 以便 Javascript 可以尋找到其 id 並予以控制
請各位依上圖的標示為 img 標籤加上 id。選取控制元素
選擇所需的行為指令
開啟「標籤檢視窗 \ 行為」面板,選擇「新增行為 \ 調換影像」。選擇或輸入參數
- 影像:選擇 photo。
- 設定原始檔為:選擇對應的大圖影像。
沒有留言 :
張貼留言