心琴

網頁上的每個圖層都可以設定成 「隱藏」 或是 「顯示」 狀態, 這主要是用來配合行為, 以設計出各項動態網頁效果。例如先讓所有的圖層隱藏起來, 等滑鼠移到某個特定的地方時, 再出現對應的圖層內容；此外也可以用來製作隱藏式選單, 節省版面空間。只要你的創意十足, 就可以利用圖層的隱藏與顯示功能做出許多種變化。

設定圖層的隱藏/顯示狀態

要設定網頁上所有圖層的隱藏/顯示狀態, 最快的方法當然是從圖層面板來控制囉！執行 『視窗/圖層』 命令叫出該面板後, 目前網頁裡的所有圖層都會列名在其中, 而我們可以從 「眼睛」 欄來設定每個圖層的顯示與否：

圖層面板預設是不出現眼睛圖示的, 表示圖層平常在網頁上是呈現顯示狀態, 然而當圖層位於另一個圖層之中 (就是所謂的巢狀圖層),

若父圖層設為隱藏狀態, 那麼處於預設狀態的子圖層也會跟著隱藏。所以平時若要使圖層能夠顯示出來, 可不必特別把眼睛圖示變成張開狀態, 除非它的父圖層是隱藏狀態才需做此設定。

範例觀賞

這個網頁就是圖層的顯示/隱藏應用實例, 請將游標指向箭頭處：

範例實作
請開啟練習檔 ex18-06.html, 我們事先在網頁中建立了 3 個圖層, 並在圖層中分別放入 3 張圖片：

由於網頁載入後, 我們不想先看到 “頭髮” 圖片, 所以要將該圖片所在的圖層設為隱藏狀態, 這樣一開始就不會出現這張圖片。

TIP：將圖層隱藏後, 在 Dreamweaver 裡就無法看到該圖層了, 若我們要修改圖層內容或移動圖層時, 只要從圖層面板來選取被隱藏的圖層, 該圖層就會暫時出現了。

3.接著我們想讓滑鼠移到 "箭頭" 圖片上時, 原本隱藏的 "頭髮" 圖片就會顯示出來, 所以請選取 “箭頭” 圖層中的圖片, 然後在行為面板中加入顯示隱藏圖層：

4.回到行為面板, 將滑鼠事件改成 onMouseOver, 表示當滑鼠移到箭頭圖片上時, 就會觸發設定的事件 (也就是顯示 “頭髮”圖層)：

TIP：如果找不到 onMouseOver 事件, 請按+鈕, 從該功能表中選擇顯示特定事件, 再從子功能表選擇 「IE 4.0」 或是更新的瀏覽器版本。

5.看起來好像設定完畢了, 不過當你在瀏覽器中測試時, 會發現滑鼠離開箭頭圖片後, “頭髮” 圖層並不會消失, 所以我們必須設定當滑鼠移開後, “頭髮” 圖片會再度自動隱藏起來。

6.至此就全部設定完畢了, 請按下F12鍵到瀏覽器中測試看看吧！

補充說明

在上述的範例中, 我們只讓卡通人物的 "頭髮"有隱藏式的圖文說明效果, 如果你要讓其它部份也有同樣的效果, 只要準備好相關圖片分別放在圖層裡, 再仿照上面的做法來製作就行了。要注意的是, 當圖層一多時, 圖層的名稱更顯重要, 否則在上述的步驟 3 時, 就不容易辨識哪個圖層才是你要設定的目標了！

此外, 如果你不想用 “箭頭” 圖片來指引瀏覽者, 而想讓瀏覽者自行尋找哪裡具有隱藏式說明效果, 那麼可將箭頭圖片換成一張完全透明的 gif 圖片再將圖層移至卡通人物的頭髮、墨鏡…上, 即可達到如此的效果。

要製作透明的圖片, 可在影像處理軟體 (例：Photoshop、PhotoImpact ) 中先將圖片設定成只有一種顏色, 再用將圖片存成 GIF檔, 將該顏色設為透明色彩。