Dreamweaver 4 簡明教學(八、為網頁增添互動效果)

作者：Eve Cole 更新時間：2009-05-30 18:35:37

八、為網頁增添互動效果

製作簡單的互動效果

在網頁上常常看到這樣的效果，當滑鼠移到一張圖片上的時候，原來的圖片就切換為另一張圖片，滑鼠移開後，又恢復原來的模樣，是怎麼做的呢？在開篇的時候，提到Dreamweaver比Frontpage優勝的其中一個地方是Dreamweaver能做出能具互動性的網頁。現在，我們就利用Dreamweaver來製作這個最簡單的互動效果——變換圖片。

準備兩張大小相同的圖片，一張是滑鼠還沒移上的狀態，另一張是滑鼠移上去後的圖片，例如以下兩圖，左圖是一個凸起的按鈕，右圖是一個凹下的按鈕：

點擊物件面板上的

，看到如下的對話框：

① Image Name：變換圖片效果的標記名稱，Dreamweaver會自動分配；

② Original Image：指定原始的圖片，（例如這裡是凸起的圖）

③ Rollover Image：指定滑鼠移上去後的圖片（例如這裡是凹下的圖）；

④ Url：圖片的連結網址；

例如依照上圖的設定完畢後，按下OK，然後可以按F12預覽一下效果了。