滑鼠指標移到娃娃圖片上時, 圖片會跟著放大, 離開後又會恢復原狀

製作方式

Step 1 執行『視窗/AP 元素』命令開啟 AP 元素面板, 安排好 3 個 AP 區塊, 並且各自都放入一個娃娃圖。我們接著要進行設定, 使滑鼠指標移到娃娃上時, 娃娃會變大；而當滑鼠指標移開時, 娃娃也會恢復原先的模樣。

Step 2 先選取最左邊的娃娃圖, 再執行『視窗/標籤檢測器』命令開啟行為面板, 然後按下行為面板的 鈕, 執行『效果/ (放大/縮小)』命令。

Step 3 開啟放大/縮小交談窗後, 拉下目標元素列示窗選擇<目前選取範圍>;, 效果列示窗選擇放大, 放大自設定為目前圖片的寬度 42 像素, 放大至設定為 103 像素寬。

Step 4 設定好後按下確定鈕, 行為面板即會出現剛剛設定的行為效果, 請你將事件設定為onMouseOver, 表示當滑鼠指標移到目標元素上時會執行該行為效果。

Step 5 再來要設定滑鼠指標移開後會恢復原本狀態。一樣先選取左邊第一個娃娃圖, 然後按下行為面板的 鈕, 執行『效果/ (放大/縮小)』命令開啟放大/縮小交談窗, 將目標元素列示窗選擇<目前選取範圍>, 效果列示窗選擇縮小, 縮小自輸入放大後圖片的寬度 103 像素, 縮小至設定為希望恢復的寬度 42 像素寬。

Step 6 設定好後按下確定鈕, 行為面板即會出現剛剛設定的行為效果, 請你將事件設定為onMouseOut, 表示當滑鼠指標從目標元素上移開時會執行該行為效果。

Step 7 重覆步驟 2～6, 將另外 2 個娃娃分別加入相同的行為效果。全部設定好並存檔後, 按下 F12 鍵即可預覽完成的設定效果。