用CSS做的Rollover link
先看一下效果 : RollOver Link
之前做這種圖片切換的按鈕效果,通常都是用javascript,
但是如果用CSS套的話,
程式的部份將會簡單許多.
要做這樣的效果,
你需要準備一張按鈕的底圖,如 :
這是一張圖,將變化的前後效果都做在同一張圖上.
在來就是CSS語法的部份,
我們將要套用的link都加上一個class為rollover,
然後CSS語法如下:
a.rollover {
text-decoration : none;
text-align:center;
padding-top:8px;
display:table-cell;
vertical-align:middle;
width: 100px;
height: 36px;
background: url("button.gif") 0 0 no-repeat;
color:#FFFFFF;
}
a:hover.rollover {
background-position: -100px 0;
}
而html則只要在要顯示成按鈕的link加個class就可以了!
如:
<a class="rollover" href="#">連結一</a>
<a class="rollover" href="#">連結二</a>
<a class="rollover" href="#">連結三</a>
<a class="rollover" href="#">連結四</a>