Dreamweaver教學 – 調換影像

後台網頁設計 RWD網頁設計 網頁設計推薦

在使用網頁的經驗中,大家是否有遇過影像太小看不到細節的狀況?若是我們可以使用滑鼠滑入或點擊該影像,能在另一個區域中檢視到放大的影像,那應該是比較妥當的呈現方式!

一般的購物網站都有製作此機制,否則,使用者在購物中都只能看到小圖而看不到細節的顯示時,難免會對該商品的認知、品質產生懷疑、不安全感而不敢購買,自然而然地便損失了商機!

若我們製作此效果該用什麼樣方式來做呢?答案是 Javascript 、 jQuery ,誠如前篇所描述的一樣,若是不會撰寫 Javascript 不就挫咧蛋!現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的問題。


01 Dreamweaver 網頁設計

接下來,我們就開始使用 Dreamweaver 行為來製作我們所需要的提示文字。

請各位先了解一下待會兒要控制的區塊,如下圖所示:

02 Dreamweaver 網頁設計

在我們的教學過程中常常會碰到 ” 觸發對象 ” 設定錯誤這類的問題,所以,請在使用行為時遵循下面幾個步驟,否則在控制對象時會設定錯誤喔!

  1. 請為元素加上 id 以便 Javascript 可以尋找到其 id 並予以控制。
  2. 選取控制元素。
  3. 選擇所需的行為指令。
  4. 選擇或輸入參數。

請為元素加上 id 以便 Javascript 可以尋找到其 id 並予以控制

請各位依上圖的標示為 img 標籤加上 id。

03 Dreamweaver 網頁設計

選取控制元素

04 Dreamweaver 網頁設計

選擇所需的行為指令

開啟「標籤檢視窗 \ 行為」面板,選擇「新增行為 \ 調換影像」。

05 Dreamweaver 網頁設計

選擇或輸入參數

  1. 影像:選擇 photo。
  2. 設定原始檔為:選擇對應的大圖影像。

06 Dreamweaver 網頁設計

依此類推,其他的 <img> 也設定所需的調換影像內容。


總結:

雖然 Dreamweaver 行為提供給我們這樣便利的工具,但在 HTML 中也是有產生一些程式碼喔!就是當滑入影像後便呼叫 MM_swapImage 函數,將我們剛剛所設定的參數代入到函數內執行;滑出影像時,呼叫 MM_swapImgResotre 函數,以便回復到原來狀態。

07 Dreamweaver 網頁設計

位於檔頭內的 Javascript 將參數代入後以顯示大圖影像。

08 Dreamweaver 網頁設計

網動廣告科技

參考資料:http://www.flycan.com/article/dreamweaver/dreamweaver-swapimage-1413.html

Dreamweaver教學 – 調換影像