用CSS+一张图实现轮换菜单效果
时间：2006-06-09 来源：一地风飞
<html>
<head>
<style type="text/css">
<!--
ul#menu { width:300px; background:transparent url(01.jpg)}
/*菜单排列*/
ul#menu li {list-style-type:none; float:left; width:100px; }
ul#menu li a {
display:block;
width:100px;
text-decoration:none;
background:transparent url(01.jpg) no-repeat 500px 500px; /*设为500是将背景设在菜单范围之外*/
}
/*以下设置当鼠标移上去时,将图片的一部分作为背景,以达到变换图片的效果*/
a#item1:hover {background-position: 0 -100px;}
a#item2:hover {background-position: -100px -100px;}
a#item3:hover {background-position: -200px -100px;}
-->
</style>
</head>
<body>
<ul id="menu">
<li><a id="item1" href="#" title="Item 1"> </a></li>
<li><a id="item2" href="#" title="Item 2"> </a></li>
<li><a id="item3" href="#" title="Item 3"> </a></li>
</ul>
</body>
</html>
附，所用图片:
500)this.width=500;" border=0>
其实质是当鼠标放在格1上时，CSS将格1的背景设为4,如此类推,更换背景只是位置的变动，不存在图片变换。这样做的好处是:只有一张图，不会出现变换图片时由于网络慢而产生的停滞现象..
相关阅读 更多 +
