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应用的更多相关文章

  1. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  2. 利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

    1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. .container{ background-size: 100% 100 ...

  3. java实现图片文字识别的两种方法

    一.使用tesseract-ocr 1.    https://github.com/tesseract-ocr/tesseract/wiki上下载安装包安装和简体中文训练文件 window64位安装 ...

  4. Html中鼠标悬停显示二级菜单的两种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. QT 中设置按钮图片和文字的两种方法

    1.使用QpushButton自带的API实现: void setIcon(const QIcon &icon) void setText(const QString &text) 该 ...

  6. 清除SQLServer日志的两种方法

    日志文件满而造成SQL数据库无法写入文件时,可用两种方法:一种方法:清空日志.1．打开查询分析器,输入命令DUMP TRANSACTION 数据库名 WITH NO_LOG2.再打开企业管理器--右键 ...

  7. 遍历Map key-value的两种方法

    以前遍历Map key-value比较习惯的方式是先获取Map中的所有key值,然后根据key,依次从Map中去数据,基本方式如下: Map<String,String> testData ...

  8. UIImage加载图片的两种方法区别

    Apple官方的文档为生成一个UIImage对象提供了两种方法加载图片: 1. imageNamed,其参数为图片的名字: 2. imageWithContentsOfFile,其参数也是图片文件的路 ...

  9. AE 将地图导出为图片的两种方法

    在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或Layout中的图象转出有两种方法,一种为通过IActiveView的OutPut函数,另外一种是通过IExpor ...

随机推荐

  1. document load 与document ready的区别

    页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数 问题:如果图片资源较多,加载时间较长,onload后等待执行的函 ...

  2. The Struts dispatcher cannot be found. This is usually caused by using Struts tags without the associated filter. 异常

    异常信息如下: The Struts dispatcher cannot be found. This is usually caused by using Struts tags without t ...

  3. Android 自定义shape圆形按钮

    Shape的属性: solid 描述:内部填充 属性:android:color 填充颜色 size 描述:大小 属性: android:width 宽 android:height 高 gradie ...

  4. tornado 使用过程中提示‘no module name ioloop’

    千万不要将程序文件命名为tornado.py 不然永远不会运行,因为运行后会在tornado.py里查找ioloop信息,永远找不到...

  5. python 学习day6（面向对象）

    博客部分内容转自:http://www.cnblogs.com/wupeiqi/p/4493506.html 面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法 ...

  6. 了解单位em和px的区别

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  7. 让乌龟在提交cocos2d-x版本时自动去掉不需要的东东

    引擎版本:2.1.4 ide:vs2012 一般协作开发情况下,有意思无意将bin.obj等一些目录添加到版本管理中是很烦人的事儿,在VS中不断地编译程序集和提交将带来版本暴增问题.如果你用的是乌龟S ...

  8. Delphi下获取IE的UserAgent的方法

    方法一:使用SHDocVw, MSHtml单元提供的一些方法利用浏览器的特性来获取. uses SHDocVw, MSHtml; function GetUserAgent: string;var   ...

  9. Delphi 获取北京时间（通过百度和timedate网站）

    方法一: uses ComObj, DateUtils; function GetInternetTime: string; var XmlHttp: OleVariant; datetxt: str ...

  10. EventBus源码解析

    用例 本文主要按照如下例子展开: //1. 新建bus对象,默认仅能在主线程上对消息进行调度 Bus bus = new Bus(); // maybe singleton //2. 新建类A(sub ...