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. jQuery学习笔记(6)--复选框控制表格行高亮

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  2. Oracle 11g 执行计划管理2

    1.创建测试数据 SQL> conn NC50/NC50 Connected. SQL)); SQL> insert into tab1 select rownum,object_name ...

  3. Python核心编程--学习笔记--2--Python起步(下)

    16 文件和内建函数open(),file() 打开文件: fobj = open(filename, 'r') for eachLine in fobj: print eachLine, #由于每行 ...

  4. 说说用C语言求根的那些事儿

    C语言--求根:计算机只识别0和1,那么问题来了,作为计算工具如何解决数学问题?其实,计算机是死东西,都是程序员用计算机的的思维去加数学公式计算数学题的.听起来好高端的样子,其实啊,也就那么回事儿, ...

  5. C开发 中原子性操作 , 除了快什么都不剩下了

    题外话 今天,听歌曲听到一首缅怀迈克尔·杰克逊的歌曲 如下: http://music.163.com/#/song?id=1696048  Breaking News 每次听迈克尔 音乐,特别有战斗 ...

  6. EMVTag系列8《IC卡公钥证书》

    Ø  9F46    IC卡公钥证书 L: NI -C(有条件):如果支持DDA 发卡行认证过的IC 卡公钥 Ø  9F47    IC卡公钥指数 F: b T: 9F47 L: 1 or 3 C:如 ...

  7. C#串口操作类，包括串口读写操作

    串口进行操作的类,其中包括写和读操作,类可设置串口参数.设置接收函数.打开串口资源.关闭串口资源,操作完成后,一定要关闭串口.接收串口数据事件.接收数据出错事件.获取当前全部串口.把字节型转换成十六进 ...

  8. hdu 5142 NPY and FFT

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5142 NPY and FFT Description A boy named NPY is learn ...

  9. 89C51单片机实现的流水灯

    /*******************************************Copyright:  2014.02.09.version1.0File name: led.cDescrip ...

  10. mssql 动态添加数据库用户

    USE [master]GOCREATE LOGIN [admin] WITH PASSWORD=N'123456', DEFAULT_DATABASE=[test], CHECK_EXPIRATIO ...