CSS應用實例(7)-滑鼠移過時的圖示變換

早期CSS還不流行的時候,如果要讓圖示在滑鼠移過去時變換成另一個圖示,必需要撰寫複雜的JavaScript。然而其實如果使用CSS,可以很輕易地達到這種功能。

請參考下面的程式碼,將它另存成HTML檔案。在這裡要特別注意第1行DOCTYPE的宣告,如果沒有加入這一行,IE瀏覽器可能會無法正常的顯示。這裡的HTML內容事實上只有一個DIV標籤,隨著網站不同的需要,也可以修改成其它的標籤,例如在導覽列裡提到的項目符號。




我們先建立第21行的DIV標籤,再開始寫第7行的CSS。如果標籤裡面沒有任何內容,它的寬度(width)或高度(height)可能就會是0,變成看不見。所以在我們設定第10行的背景圖(background)之後,記得要指定DIV的寬和高(大小和圖片一樣即可),這樣才看得見東西。接下來就是第12和15行了,透過CSS的狀態設定,來修改它的背景,相關語法可以參考「CSS套用規則」。這個時候如果三張圖的大小一樣,就不必再設一次寬和高了,CSS會自動繼承前面的設定。

像這個樣子的語法,也可以結合JavaScript語法完成。參考下面的程式碼,一個DIV的標籤就可以了。style裡是原始的設定,和上面CSS一樣。第3行onmouseover是當滑鼠移過時要做的動作,我們指定這個物件(this)的CSS樣式(style)的背景(background)為第2張圖。因此第4行onmousedown當滑鼠點擊時,就顯示第3張圖。這裡必需要特別注意的是第2行的onmouseout,表示當滑鼠離開時要做的動作,設定成第1張圖。如果沒有設定這個,當圖示變成第2或第3張圖時,就會變不回來喔。

<div style="width:57px;height:47px;background:url(https://lh5.googleusercontent.com/_SAlWJ_xow1Y/TcTIoKK0kGI/AAAAAAAACio/lHBTGsJKjsc/book1.gif);"
onmouseout="this.style.background='url(https://lh5.googleusercontent.com/_SAlWJ_xow1Y/TcTIoKK0kGI/AAAAAAAACio/lHBTGsJKjsc/book1.gif)'"
onmouseover="this.style.background='url(https://lh5.googleusercontent.com/_SAlWJ_xow1Y/TcTIoDh8UCI/AAAAAAAACis/u5Rs3JUgcKs/book2.gif)'"
onmousedown="this.style.background='url(https://lh3.googleusercontent.com/_SAlWJ_xow1Y/TcTIoN8uVZI/AAAAAAAACiw/NXQy-ASSq0k/book3.gif)'">
</div>

比起第二種JavaScript的用法,第一種的CSS是不是顯得簡單清楚多了呢?而且也才符合CSS把文字和樣式分開的用意。不過這裡還是把程式碼寫出來提供給大家參考。我們在撰寫部落格時無法使用第一種,但是如果部落格文章有支援JavaScript,就可以用第二種方式。

onmouseover、onmousedown與onmouseout是JavaScript的事件,this.style…也屬於JavaScript的語法。詳細的說明請參考JavaScript單元。