鼠标经过图片时变换的两种方法--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 ...
随机推荐
- 配置文件的读取添加webconfig
webconfig.xml的配置文件内容挺丰富的,在这篇文章里笔者只对AppSettings这个节点进行配置文件读取和添加 public class ConfigurationRef { /// &l ...
- php get_magic_quotes_gpc() addslashes()
最近学了学PHP,看到这段代码 function daddslashes($str){ return (!get_magic_quotes_gpc())?addslashes($str): ...
- （六）Android中Service通信
一.启动Service并传递参数 传递参数时只需在startService启动的Intent中传入数据便可,接收参数时可在onStartCommand函数中通过读取第一个参数Intent的内容来实现 ...
- div+css中常见的浏览器兼容性处理-兼容不同浏览器
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...
- C# 数组的应用
//数组的应用: //(一).冒泡排序. //1.冒泡排序是用双层循环解决.外层循环的是趟数,里层循环的是次数. //2.趟数=n-1:次数=n-趟数. //3.里层循环使用if比较相临的两个数的大小 ...
- ASP.NET版本的Kindeditor插件的使用
1.先从官网中现在最新版本的Kindeditor,官网地址:http://www.kindsoft.net/ 下载之后的目录结构如下:
- Best Time to Buy and Sell Stock I && II
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...
- juce 中的WeakReference分析
juce中的WeakReference设计得比较巧妙,巧妙就是使用delete之后就可以通知道WeakReference,原理其实也很间单,其实就是在对象里添加了一个子对象masterReferenc ...
- locate linux文件查找命令
locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了.在一般的 di ...
- Web QQ自动强制加好友代码
也许见过强行聊天的代码: tencent://Message/?Uin=574201314&websiteName=www.oicqzone.com&Menu=yes 但是你应该不知 ...