Css 单图片按钮实例(css 图片变换)

最新推荐文章于 2023-12-07 14:25:05 发布

dfsafsd32323

最新推荐文章于 2023-12-07 14:25:05 发布

阅读量187

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/simpledev/p/3936932.html

版权

1.场景描述，根据鼠标的移动，动态的切换按钮图片。

2.方法1，准备两张120*41的图片，一张正常状态图片，一张按下效果图片。在鼠标放在的按钮上设置按下图片，移开又恢复到正常状态图片。缺点：在网页上按下的图片需要下载，会出现鼠标移动上去，未马上切换效果。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两张图片按钮实例</title>
<style type="text/css">
#theLink{
    display:block;
    width:120px;
    height:41px;
    margin:0 auto;
    background:url(images/normal.gif) no-repeat;
}
#theLink:hover{background:url(images/press.gif) no-repeat;}
</style>
</head>

<body>
<a id="theLink"></a>
</body>
</html>

3.方法2，整个设置一张图片，120*82，根据显示的需要，动态的截取显示尺寸。优势：在网页上可以一次下载完全一张图片，节约资料效率。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>单张图片按钮实例</title>
<style type="text/css">
#theLink{
    display:block;
    width:120px;
    height:41px;
    margin:0 auto;
    background:url(images/buttonBG.gif) no-repeat;
}
#theLink:hover{ background:url(images/buttonBG.gif) no-repeat 0 -41px;}
</style>
</head>

<body>
<a id="theLink"></a>
</body>
</html>

转载于:https://www.cnblogs.com/simpledev/p/3936932.html

dfsafsd32323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css 单图片按钮实例(css 图片变换)

1.场景描述，根据鼠标的移动，动态的切换按钮图片。2.方法1，准备两张120*41的图片，一张正常状态图片，一张按下效果图片。在鼠标放在的按钮上设置按下图片，移开又恢复到正常状态图片。缺点：在网页上按下的图片需要下载，会出现鼠标移动上去，未马上切换效果。<html xmlns="http://www.w3.org/1999/xhtml"><head&gt...
复制链接

扫一扫