延續前篇 Dreamweaver 行為 – 調換影像 的呈現效果,這次我們使用的方法是使用顯示隱藏元素,此方式可在 AP Div 中加入所需之文字或其他 HTML 元素,若是使用 Dreamweaver 行為中的調換影像則無法做到!請各位詳細看 Away 的解說~


接下來,我們就開始使用 Dreamweaver 行為來製作我們所需要的顯示隱藏元素。

首先,我們要佈置網頁載入畫面後的預設環境,也就是說把不需看到的 AP Div 顯暫時隱藏起來,分別是 id 為:apDiv9、apDiv10、apDiv11、apDiv12、apDiv13、apDiv14、apDiv15,這樣一來~便看不到內容了!

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

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

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

由於在新增 AP Div 時,Dreamweavaer 便會幫我們加上 id,故在此我們不需再自行輸入。


選取控制元素


選擇所需的行為指令

開啟「標籤檢視窗 \ 行為」面板,選擇「新增行為 \ 顯示隱藏元素」。


選擇或輸入參數

元素:選擇要控制的 id 、顯示與隱藏。


更改滑鼠行為。

設定容器文字完成後,滑鼠預設的行為是 onClick(放開),請改為 onMouseOver(滑入)。

依上述方式為 <img> 再加上另一個顯示隱藏元素行為,其參數值為:

元素:選擇要控制的 id 、顯示與隱藏。

設定容器文字完成後,滑鼠預設的行為是 onClick(放開),請改為 onMouseOut(滑出)。

依此類推,其他的 <img> 也是依上述方式設定即可。


總結:

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

位於檔頭內的 Javascript 將參數代入後以顯示該對應之 AP Div。