鼠标经过图片时变换的两种方法--css+div及javascript应用
javascript方式： 熟悉使用document.getElementById()取得节点对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.div_n{
width:300px;
height:250px;
border:1px solid gray;
}
</style>
<script type="text/javascript">
function changeSrc1()
{
document.getElementById("myImage").src="/images/2.gif"
}
function changeSrc2()
{
document.getElementById("myImage").src="/images/1.gif"
}
</script>
</head> <body>
<div class="div_n">
<a href="http://www.baidu.com">
<img id="myImage" src="/images/1.gif" onmouseover="changeSrc1()" onmouseout="changeSrc2()"/>
</a>
</div>
</body> </html>
css+div方式： 合理控制层的样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> New Document </title>
<style>
.main{
width:300px;
height:250px;
border:1px solid gray;
}
.content{
width:150px;
height:160px;
border:1px solid gray;
background-image:url(images/2.gif);
background-repeat: no-repeat;
}
.content:hover{
background-image:url(images/3.jpg);
}
a{
text-decoration:none;
}
</style>
</head> <body>
<div class="main">
<a href="http://www.baidu.com/"><div class="content"></div></a>
</div>
</body>
</html>
鼠标经过图片时变换的两种方法--css+div及javascript应用的更多相关文章
- 原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
- 利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法
1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. .container{ background-size: 100% 100 ...
- java实现图片文字识别的两种方法
一.使用tesseract-ocr 1. https://github.com/tesseract-ocr/tesseract/wiki上下载安装包安装和简体中文训练文件 window64位安装 ...
- Html中鼠标悬停显示二级菜单的两种方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- QT 中设置按钮图片和文字的两种方法
1.使用QpushButton自带的API实现: void setIcon(const QIcon &icon) void setText(const QString &text) 该 ...
- 清除SQLServer日志的两种方法
日志文件满而造成SQL数据库无法写入文件时,可用两种方法:一种方法:清空日志.1．打开查询分析器,输入命令DUMP TRANSACTION 数据库名 WITH NO_LOG2.再打开企业管理器--右键 ...
- 遍历Map key-value的两种方法
以前遍历Map key-value比较习惯的方式是先获取Map中的所有key值,然后根据key,依次从Map中去数据,基本方式如下: Map<String,String> testData ...
- UIImage加载图片的两种方法区别
Apple官方的文档为生成一个UIImage对象提供了两种方法加载图片: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路 ...
- AE 将地图导出为图片的两种方法
在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或Layout中的图象转出有两种方法,一种为通过IActiveView的OutPut函数,另外一种是通过IExpor ...
随机推荐
- Lucene的多线程访问原则和同步,锁机制
本文介绍lucene多线程环境下的使用原则和commit.lock与write.lock实现的锁机制. 设计之初就是服务于多线程环境,大多数情况下索引会被不至一个线程访问.索引时一个关键资源.在对这样 ...
- zoj1027 Human Gene Functions
一道动态规划,两个串进行匹配,不同字母匹配的值不一样,也可以和空格匹配(空格不能与空格匹配),求最大的匹配值. 数据很弱,每个串都在100以内. 定义dp[i][j]为第一个串前i个数和第二个串前j个 ...
- 泛型编程中的Concept, Model和Policy
A crude explanation Concept A set of requirements on a type, e.g. a RandomAccessible concept require ...
- linux安装php5.3
安装php的依赖包 [root@localhost admin]# unzip libxml2-2.7.8.tar.zip [root@localhost admin]#tar zvxf libxml ...
- 存储过程与SQL的结合使用
--1调用存储过程exec 存储过程名 参数 openrowset方法使用: select * from openrowset('sqlncli', 'server=192.168.247.64;ui ...
- php 日期 - 计算2个日期的差值
/** * 日期-计算2个日期的差值 * @return int */ public function get_difference($date, $new_date) { $date = strto ...
- 如何去除List中的重复值？
今天碰到一个问题,已经有一个List<string>,里面有重复值,希望将重复值去掉,同时不能破坏现有的顺序. 感谢 http://bbs.csdn.net/topics/39024721 ...
- 基于本地iso 搭建的本地yum源 安装部署openldap
1,yum openldap-servers,openldap-clients 基于iso-cd1搭建的本地yum源(具体搭建参看ruige的repo本地快速搭建,在右边 找找看中输入repo key ...
- Windows系统的线程调度与软件中断分发
在Windows操作系统内核把软件中断分为三个中断级别:DISPATCH_LEVEL,APC_LEVEL,PASSVIE_LEVEL.同时他们与线程的调试相关,WINDOWS内核中没有一个专门的程序来 ...
- Python 操作 MySQL--（pymysql）
h2 { color: #fff; background-color: #7CCD7C; padding: 3px; margin: 10px 0px } h3 { color: #fff; back ...