星期五, 7月 27, 2007

利用css將一張圖製作成mouseover效果

同事James在製作網頁時,請他嘗試利用一張圖以CSS製作mouseover效果。



利用一張圖上半部製作onmouseout的效果下半部製作onmouseover的效果
在div中定義出欲顯示出來的總寬度與高度,並設定背景定義每一個選項li的寬度高度,並設定選項的連結只顯示區塊→#desk li a{display: block;}

mouseover的效果是利用負座標將圖片往上提,座標值就是剛剛設定每一選項li的寬度
另外選項要設成:浮動靠左,不然座標會錯亂→#desk li{float: left;}

其與法如下:
CSS:
#desk {
background-image: url(img/help_desk123.gif);
list-style-type: none;
height: 82px;
width: 343px;
}
#desk li{
float: left;
}
#desk li a{
display: block;
}
#desk1 a{
width: 120px;
height: 82px;
}
#desk2 a{
width: 105px;
height: 82px;
}
#desk3 a{
width: 118px;
height: 82px;
}
#desk1 A:hover{
background: url(img/help_desk123.gif) 0px -82px
}
#desk2 A:hover{
background: url(img/help_desk123.gif) -120px -82px
}
#desk3 A:hover{
background: url(img/help_desk123.gif) -225px -82px
}


HTML:
張貼留言