CSS教學：Image Rollover：布拉格的羅傑：Xuite日誌

2005-12-20 22:36 CSS教學：Image Rollover

平均分數：0 顆星投票人數：0 人
我要評分：

標籤：

如何用 CSS 製作影像 Roll-over 效果？(上圖的邊框變化效果。點選這裡看其他運用範例)

我的作法是在 自定樣式(CSS) 新增一段語法；修改成功後，於編輯網誌文章時，切換到 HTML 原始碼，把要顯示 Roll-over 效果的影像檔加入一段語法。
這篇文章適合給使用過自定樣式(CSS)，而且編輯文章時曾切換到 HTML 原始碼的 Blogger 應用。在運用這個效果前，請你留意：

影像 Roll-over 效果需要更動你的自定樣式(CSS)。強烈建議你做任何修改前，先把自定樣式(CSS)中所有文字複製到記事本中另存新檔。如果因為修改而導致意外，還可以用原版本重新救回來。

我不是 CSS 專家，看官們若有更好的運用方式，甚至不用更改自定樣式就能達成的話，敬請不吝分享。

第一部份：在自定樣式(CSS)中新增 Image Rollover 效果語法

修改自定樣式。
自定樣式(CSS)在這裡可找到，請點選後開始你的 CSS 冒險...。恕我囉唆，請務必事先備分另存新檔，掛了別找我。

新增以下 CSS 語法於 /*文章主體*/ 與 /*作者列*/ 之間的區段。
其實這段 CSS 只要不放在 HTML 或 BODY 區段內，其他區段之間皆可。但為了不讓大家第一次就做錯，在此規定個地方，方便日後管理自己的 CSS。

/*文章主體內影像檔超連結 Rollover 設定*/
.imgrollover {
text-align: left;/*設定影像檔置左，可自行更改為center或right*/
margin-top: 5px;/*當影像置頂且網誌使用自動摘要時，避免影像top邊界被遮蔽*/
}
.imgrollover a, .imgrollover a:link, .imgrollover a:visited {
border: 1px solid #cccccc;/*定義邊框顏色，顏色可自行更改*/
padding: 2px;
background-color: #ffffff;
}
.imgrollover a:active {
border: 1px solid #999999;
padding: 2px;
background-color: #999999;
}
.imgrollover a:hover {
border: 1px solid #cccccc;/*定義滑鼠移至影像時邊框顏色，顏色可自行更改*/
padding: 2px;
background-color: #cccccc;/*定義滑鼠移至影像時背景顏色，顏色可自行更改*/
}

新增語法成功後，你的自定CSS看起來會是這樣。注意，每個語法區段都是以符號 } 結尾。上述語法必須接在 /*文章主體*/ 區段的 } 之後，放錯會連帶搞亂文章主體設定喔。

別急，記得按下 使用自定樣式CSS，再按下 確認送出，整個 CSS 才算更新完畢。

修改完自定樣式CSS，從此你每一篇網誌都能運用這個效果，無須再重新新增。

第二部份：在網誌影像檔中運用 Image Rollover 效果

改完自定樣式(CSS)之後，接著要把 Roll-over 效果運用在你選定的影像上。首先，這個影像檔必須有個超連結。拿我超可愛小姪子的口水照為例。

將想要顯示 Roll-over 效果的影像插入連結

如果你不清楚如何插入超連結，請參閱 Xuite Blog 日誌教學「插入網站連結」。
我插入的連結是 http://blog.xuite.net/yeegiah/diary/4653359，也就是這篇網誌的網址。

插入連結後，切換到 HTML 原始碼。

找出你選定的影像檔所在位置。
如果你的影像檔放在文章頂端，你可以在 HTML 語法一開始的地方找到它。本範例的影像網址是 http://f.blog.xuite.net/f7/b7/10055976/blog_6267/txt/4653359/5.jpg

把舊語法取代成新語法。
在 HTML 原始碼中，我們可以看到影像檔網址前後被上圖中我特意用藍底白字標示的兩個語法包夾住。
你的任務是把語法變成這樣：把 p align="left" (或者只出現 p ) 取代為 div class="imgrollover" (注意：imgrollover 絕不能拼錯)。再把 /p 取代為 /div。

取代成功，完成圖如下。

為了方便你拷貝運用，我把整個語法放進以下文字框中。

按下切換 HTML 原始檔，回到一般的文章編輯模式，繼續完成你的網誌內容。

按下發表，就能在你網誌的頁面看到這效果。
在編輯文章時，影像 Roll-over 效果是看不出來的。別太快以為你弄錯了，放心按下發表就可以看成果了。

附註說明：

這裡介紹的方式只適用 IE (我使用 PC，IE 6.0 )。FireFox 1.5 瀏覽器無法顯示同樣效果 (我尚未測試上述兩者之外的瀏覽器)。

用 IE6.0 看起來，Roll-over 效果能正常顯示 (圖示)：

用 FireFox 1.5 看起來，Roll-over 效果不能正常顯示 (圖示)：

如果你希望盡量讓不同瀏覽器的使用者都能看到 Roll-over 效果，我敬佩你。據我在網路上查到的資料，適合不同瀏覽器的 Roll-over 語法似乎有個限制，就是必須把網誌中所有運用相同 Roll-over 效果的影像檔皆設為同樣寬度，(因為使用 display:block，配合 width 指定寬度。我以上介紹的語法並不使用這些指令)。如果你有興趣，該 Image Rollover 語法可參閱這裡的說明 (英文)。

祝各位冒險成功！

Xuite CSS教學、樣式與問題整理
http://blog.xuite.net/yeegiah/diary/11431003

更多關於羅傑的CSS：
http://blog.xuite.net/yeegiah/diary?st=c&re=list&p=1&w=110964

Roger / Xuite日誌 / 回應(6) / 引用(1) / 好文轉寄

小姪子的禱告|日誌首頁|聖誕裝飾

回應