如何利用CSS製作Rollover

2006-02-14 11:03 PM / by quawn [本篇文章採創意公用授權 轉載請註明出處]

好一陣子沒有寫有關網頁製作的心得與撇步，以下分享一個非常實用的 CSS 小技巧，容小弟細述如下：

使用 Java Javascript 實現 Rollover 固然簡單，且若是會使用 Dreamweaver 的朋友更是容易，不過使用 Java Javascript 實現會出現以下問題：

* 必須在 Header 定義 Java Javascript function ，當然也可以在 Body 下，不過這樣會影響 loading 的時間；且就 MT 來說，你可能得為了一個 Rollover 而必須在所有的模板中下定義 Java Javascript，非常沒有效率。
* 需要於 Body 標籤下 onload 參數，這對於一般的 Blog Platform 來說真的非常不便。
* 需要編輯兩張圖檔，在前後比對時不甚方便。

而使用 CSS 來實現則有以下好處：

* 語法簡單
* 不需要分處編輯，只需要在主 Body 中使用語法即可，不需再編輯 Style Sheet。
* 讀取時間快
* 可合併使用其他 CSS 設定，像是框線設定等等。

實作範例

CSS Rollover DEMO

使用方法

此法唯一的限制為使用者需要具備基本的影像編輯能力，假設今天我們想要製作一個100*100px的 Rollover 貼紙，原始圖顯示『A』，滑鼠移上去後則為『B』，則我們需要製作一個100*200px的長形貼紙並同時放入所需的影像 (如左圖所示)，同時上傳至遠端主機。

並請於 Body 中使用以下語法即可：

<style type="text/css">
<!--
#rollover a
{
background: url("http://path.to.image") 0 0 no-repeat;
display:block;
width:100px;
height:100px;
text-indent: -3000px
}

#rollover a:hover
{
background-position: 0px -100px;
}
-->
</style>

<div id="rollover">
<a href="http://link.from.image">連結文字</a>
</div>
<br style="clear: both;" />

PS:以上紅色部分語法請依需要自行修改。

完成，重建收工。

附註：由於大部分的Blog平台在做編輯時皆有預設的formatting，像是強制換行等等，導致效果跑不出來。以下提供未分行的版本，方便各位使用。

<style type="text/css"><!--#rollover a{background: url("http://path.to.image") 0 0 no-repeat;display:block;width:100px;height:100px;text-indent: -3000px}#rollover a:hover{background-position: 0px -100px;}--></style><div id="rollover"><a href="http://link.from.image">連結文字</a></div><br style="clear: both;" />

更新：

* 感謝ayhaadam對於替代文字的提醒與建議。
* 感謝Jacky對於小弟誤用 Java 與 Javascript 的熱心糾正。

来自http://www.oui-blog.com/cgi-bin/mt-tb.cgi/421