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>

Css 单图片按钮实例(css 图片变换)的更多相关文章

  1. CSS 伪类 (Pseudo-classes)实例

    CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...

  2. CSS实例：图片导航块

    1.认识CSS的 盒子模型. 2.CSS选择器的灵活使用. 3.实例: a.图片文字用div等元素布局形成HTML文件. b.新建相应CSS文件,并link到html文件中. c.CSS文件中定义样式 ...

  3. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  4. div+css网页标准布局实例教程（二）

    五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...

  5. div+css网页标准布局实例教程（一）

    今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...

  6. PHP.5-DIV+CSS布局网站首页实例

    DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...

  7. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

  8. [HTML/CSS]uploadify自定义按钮样式

    概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改. 样式文件是uploadify.css. 打开这个文件后,你 ...

  9. 纯CSS实现3D按钮效果

    今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...

随机推荐

  1. sql中with as的用法练习

    在工作中经常看到有人使用with as,查询很顺畅,也很快,很好奇,在网上也有不少资料,看了大神的文章,也练习一下. 首先给出两位位大神文章的链接,介绍十分详细:http://www.cnblogs. ...

  2. 记一个python+sqlalchemy+tornado的一个高并发下，产生重复记录的bug

    场景:在用户通过支付通道支付完成返回时,发现我收到的处理数据记录中有两条同样的数据记录, 也就是同一笔钱,我数据库中记为了两条一样的记录. tornado端代码 from tornado import ...

  3. OpenGL完整实例

    结合上一节的内容,分享完整代码. 先画一个cube,然后通过OnGestureListener去触发onFling使它旋转起来. OnGestureListener相关的方法我已经都加了注释,可以参考 ...

  4. hdu 1212 Big Number

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1212 Big Number Description As we know, Big Number is ...

  5. MicrosoftProjectOxford 微软牛津计划

    光学字符识别 上传本地图片或者提供一个图片URL,查看光学字符识别的演示. 视觉特征分析 上传本地图片或者提供一个图片URL,查看视觉特征分析的演示. 缩略图 上传本地图片或者提供一个图片URL,查看 ...

  6. jsapi支付，提示redirect_uri 参数错误

    检查授权目录(微信支付——配置中心) appid MCHID KEYS 配置参数是否正确 appsecrect 配置是否正确(开发者中心) 如果是使用测试链接,需要同时指定测试授权目录,测试账号,并且 ...

  7. Linux下如何使CP命令不提示覆盖

    在Linux下使用CP命令,经常会提示是否覆盖,如果是太批量的文件覆盖,老是这么提示,会很烦的.那如何解决这个问题呢? 我们先来看一下原因吧! 一般我们使用的命令是cp -rf sourcefile ...

  8. sql总结

    sql总结 sql总结 where字句中使用的运算符 定义外键 定义主键 多表联合查询 统计函数 数据类型 sql语句格式 转换函数 null函数 运算符 日期 求某天是星期几 日期天数差 next_ ...

  9. Bootstrap入门五：表格

    table样式: .table:表格基本样式,很少的padding,灰色的细水平分隔线. .table-striped:斑马纹样式,隔行换色. .table-bordered:为表格和其中的每个单元格 ...

  10. android开发 drawtext的开始坐标位置

    我们canvas绘制文字的遇到一个不知道drawtext(str,x,y,paint)  中的x.y坐标值怎么定义,,如果设为(0,0)的话文字就不会出来了.因此查找到一下资料: 问:canvas.d ...