Dreamweaver教學 – 調換影像
在使用網頁的經驗中，大家是否有遇過影像太小看不到細節的狀況？若是我們可以使用滑鼠滑入或點擊該影像，能在另一個區域中檢視到放大的影像，那應該是比較妥當的呈現方式！
一般的購物網站都有製作此機制，否則，使用者在購物中都只能看到小圖而看不到細節的顯示時，難免會對該商品的認知、品質產生懷疑、不安全感而不敢購買，自然而然地便損失了商機！
若我們製作此效果該用什麼樣方式來做呢？答案是 Javascript 、 jQuery ，誠如前篇所描述的一樣，若是不會撰寫 Javascript 不就挫咧蛋！現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果，在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用，點選後即會幫我們產生 Javascript 程式碼，所以各位也不必擔心不會撰寫 Javascript 語法的問題。
接下來，我們就開始使用 Dreamweaver 行為來製作我們所需要的提示文字。
請各位先了解一下待會兒要控制的區塊，如下圖所示：
在我們的教學過程中常常會碰到 " 觸發對象 " 設定錯誤這類的問題，所以，請在使用行為時遵循下面幾個步驟，否則在控制對象時會設定錯誤喔！
- 請為元素加上 id 以便 Javascript 可以尋找到其 id 並予以控制。
- 選取控制元素。
- 選擇所需的行為指令。
- 選擇或輸入參數。
請為元素加上 id 以便 Javascript 可以尋找到其 id 並予以控制
請各位依上圖的標示為 img 標籤加上 id。
選取控制元素
選擇所需的行為指令
開啟「標籤檢視窗 \ 行為」面板，選擇「新增行為 \ 調換影像」。
選擇或輸入參數
- 影像：選擇 photo。
- 設定原始檔為：選擇對應的大圖影像。
依此類推，其他的 <img> 也設定所需的調換影像內容。
總結：
雖然 Dreamweaver 行為提供給我們這樣便利的工具，但在 HTML 中也是有產生一些程式碼喔！就是當滑入影像後便呼叫 MM_swapImage 函數，將我們剛剛所設定的參數代入到函數內執行；滑出影像時，呼叫 MM_swapImgResotre 函數，以便回復到原來狀態。
位於檔頭內的 Javascript 將參數代入後以顯示大圖影像。
參考資料：http://www.flycan.com/article/dreamweaver/dreamweaver-swapimage-1413.html
Orignal From: Dreamweaver教學 – 調換影像
留言
張貼留言