 |
|
這個單元要教你變換圖片的進階用法：Swap Image, 這是一種可變換圖片的行為,你可以在物件上設定 Swap Image 來變換網頁中的任何一張圖片, 藉由瀏覽者移動滑鼠等動作就可以產生互動性, 甚至讓網頁處處充滿驚喜。
範例效果
STEP 1.請在瀏覽器開啟 ch50-01.html, 圖片的下方我們放置了 5 個連結, 假設分別可以連至不同的網頁。
這裡有一張透明的圖片，一般情況下不會發覺它的存在，設定時稱為原始圖片
STEP 2.當我們將滑鼠移到圖示上時, 上面就會顯示另一張圖片, 告訴我們按下這個連結, 將可看到哪些相關的主題。
將文字內容作成背景透明的圖片，即可達到這個效果，設定時我們稱為變換圖片
製作方式
STEP 1.開啟練習檔案 ex50-01.html, 我們已經在連結的上方設置了 5 張透明圖片 (檔名：50pic00.gif)。
在一般的狀態下，這個位置不會顯示任何內容，只有當滑鼠指在下方連結上時，才會出現說明文字這裡有一張透明的圖片，一般情況下不會發覺它的存在，設定時稱為原始圖片
STEP 2.選取第 1 張透明圖片, 在屬性面板中更改圖片的名稱, 例如設定成 empty01, 方便稍後以 _JavaScript 來控制。完成後再重複設定其它 4 張透明圖片, 直到 empty05。
變換圖片的大小，是以原始圖片的大小為基準，所以要將原始的透明圖片改成與變換圖片大小(將透明圖片變形不會有影響)之後變換的圖片才不會有變形的疑慮。
STEP 3.接著要設定當滑鼠移到連結圖片上時, 讓原始的透明圖片變換成文字圖片。請先選取設定連結的圖片, 例如下方圖示, 然後按下行為面板的+ 鈕, 選擇『調換影像』動作。
STEP 4.在交談窗中設定當滑鼠移到圖片上時, 網頁上有哪些圖片要更換。在此例中我們要將代號為 empty01 的透明圖片, 變換成對應的文字圖片 50pic01.gif。此外, 要記得勾選預先載入影像, 以及滑鼠滑開時恢復影像兩個項目。
變換圖片的大小，是以原始圖片的大小為基準，所以要將原始的透明圖片改成與變換圖片大小(將透明圖片變形不會有影響)之後變換的圖片才不會有變形的疑慮。
STEP 5.按下確定鈕回到行為面板, 會出現調換影像以及復原調換影像兩個行為。復原調換影像行為是因為剛剛勾選了滑鼠滑開時恢復影像才加入的。最後確認復原調換影像設定為 onMouseOut 事件；調換影像設定 onMouseOver 事件, 第 1 個變換影像就完成了。
STEP 6.其它 4 個連結的變換圖片, 請重複步驟 3 到 5 完成設定, 儲存檔案後就可以預覽看看效果囉！
|
●如何設定觸發行為的事件● |
| 當你加入一個行為之後, 事件欄位會自動選擇一個適當的事件, 如果不是你想要的事件, 可以點選事件欄位的下拉箭頭, 從選單中選擇其它事件。 在事件欄位可選擇的事件選單會被許多因素影響, 例如不同版本的瀏覽器, 所能選擇的事件項目也會有所增減, 本篇將以 IE 6.0 來說明。 若是預設事件不符合你的需求, 可按下行為面板的+鈕, 在 『顯示特定事件』 中選取其它的瀏覽 器版本, 例如選擇 IE 6.0： |
網頁以簡潔的版面營造出專業的感覺, 隨著指標移至左邊不同的方塊中, 右邊會變換不同的對應圖片。要達到這個效果, 網頁上只要設定一個 原始圖片, 例如 photo01, 再設定指標移到每個色塊上時, photo01 將會變換成 photo02、photo03...等。
留言列表