鼠标经过图片时变换的两种方法--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 ...
随机推荐
- Parallel多线程
随着多核时代的到来,并行开发越来越展示出它的强大威力!使用并行程序,充分的利用系统资源,提高程序的性能.在.net 4.0中,微软给我们提供了一个新的命名空间:System.Threading.Tas ...
- Silverlight学习(三)
最近对WCFRIA+MVVM+Prism有了初步的认识,能够简单的实现一些数据库的交互.这节主要讲的是Silverlight通过domainservice和ado.net实体数据模型与数据库的交互.本 ...
- Http权威指南笔记(二) Http状态码大全
100~199—信息状态码 200~299—成功状态码 客户端发请求时,这些请求通常都是成功的. 300~399—重定向状态码 重定向状态码告知客户端使用代替位置来访问他们所感兴趣的资源. 400~4 ...
- 从一个小例子认识SQL游标
1 什么是游标: 关系数据库中的操作会对整个行集起作用. 例如,由 SELECT 语句返回的行集包括满足该语句的 WHERE 子句中条件的所有行. 这种由语句返回的完整行集称为结果集. 应用程序 ...
- 如何获取浏览器URL中查询字符串的参数
首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/ host:设置或返回主 ...
- php5.6解决curl扩展不生效的问题
最近在本机安装PHP环境,遇到一个奇粑问题,本地安装的php5.2.php5.3.php5.4都需要做常规设置,即可正常使用.安装php5.5.php5.6时php_curl按各种方法进行配制,都无法 ...
- setTimeout的若干坑
第一坑:作用域 首先,有一个关于this的面试题,是这样的: var fullname = 'John Doe'; var obj = { fullname: 'Colin Ihrig', prop: ...
- JavaScript的原型
//回顾构造函数 function Box(name, age) { this.name = name; //实例属性 this.age = age; this.run = function() { ...
- 移动端h5摇一摇事件
// 摇一摇动作 //获取加速度信息 //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断. //而为了防止正常移动的误判,需要给该变化率设置一个合适的临 ...
- python练习_购物车(2)
用python写了一个购物车程序,主要是练习,代码如下 主入口文件:main.py #!/usr/bin/env python # -*- coding:utf-8 -*- #先调用用户登录函数,在进 ...