好一陣子沒有寫有關網頁製作的心得與撇步，以下分享一個非常實用的 CSS 小技巧，容小弟細述如下：
使用 Java Javascript 實現 Rollover 固然簡單，且若是會使用 Dreamweaver 的朋友更是容易，不過使用 Java Javascript 實現會出現以下問題：
- 必須在 Header 定義
JavaJavascript function ，當然也可以在 Body 下，不過這樣會影響 loading 的時間；且就 MT 來說，你可能得為了一個 Rollover 而必須在所有的模板中下定義JavaJavascript，非常沒有效率。- 需要於 Body 標籤下 onload 參數，這對於一般的 Blog Platform 來說真的非常不便。
- 需要編輯兩張圖檔，在前後比對時不甚方便。
而使用 CSS 來實現則有以下好處：
- 語法簡單
- 不需要分處編輯，只需要在主 Body 中使用語法即可，不需再編輯 Style Sheet。
- 讀取時間快
- 可合併使用其他 CSS 設定，像是框線設定等等。
實作範例
使用方法
此法唯一的限制為使用者需要具備基本的影像編輯能力，假設今天我們想要製作一個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 的熱心糾正。
|
Flickr Album Maker支援Photoset 2006-02-15
|
| 如何利用CSS製作Rollover |
|
光箱特效：Lightbox JS 2006-02-08
|
Licensed under
我想請問有兩個圖，但是卻只有放一個圖的路徑，指上去時會便空白?
請問是我少打了什麼嗎?
謝謝
這是一個實用的技巧
算是我的習慣吧 把分號當作一行語法的結束
這樣也以後也不會在新增屬性的時候忘記加分號
不加還是可以通過檢查的
Dear ayhaadam :
謝謝建議，不過最後一個參數應該有沒有都不影響才對，不過還是加了好點..可能和標準有關是嗎？
display:block;
width:100px;
height:100px;
text-indent: -3000px；(來個分號)
}
You might find this technique interesting:
http://www.christianmontoya.com/2006/02/01/pure-css-image-rollover/
Enjoy
Dear Jacky :
謝謝糾正。
Dear 無忌 :
這個情況已經有會員回報，不過現在還不清楚原因為何，尤其是同伺服器內的引用常會出錯。
Dear quawn:
我測試成功了
好好玩
但是那個lightbox,我還是看沒有
PS.引用好像有問題,有error
Javascript 不等於 Java 呀~
Dear ayhaadam :
多謝建議！
↑↑↑
建議在
＜a href="http://link.from.image"＞
與
＜/a＞
之間
建議在
與
中間還是給他寫上連結文字
然後在 #rollover a 加上 text-indent: -3000px (一個很大的負值)
讓文字可以消失不見
不過也可以讓一些視障朋友使用純文字瀏覽器的當時也能知道連結的去向或意義 (因為 CSS 不作用了)