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. Iframe和父窗口互调方法的集合

    1.子iframe里调用父级的方法:window.parent.document.   2.父级里调用子集iframe:window.frames["iframe_text"].d ...

  2. JS中的逻辑哲学

    1.幻灯片播放. 有重用功能的代码要封入一个函数内,尽量减少调用出口(一般传入的参数为索引值),以便调用: 计数器放在最终调用的函数那里,index++: 明确那部分函数执行什么功能,将代码块只放在相 ...

  3. 手机不支持onchange事件

    今天,微信上用input type=date来计算日期,苹果上可以,我的小米2s手机死活不触发onchange,大三星的onchange效果怎么看都是onblur.听燕哥说,这事儿,得折腾. 搞来搞去 ...

  4. Tera Term——访问linux的ssh工具

    个人感觉他是一款免费的并且比较好用的ssh工具,下载地址: http://logmett.com/index.php?/products/teraterm.html 下载之后一路下一步就可以了.可以选 ...

  5. iOS设计模式解析（二）抽象工厂方法

    抽象工厂方法:提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类 与工厂方法区别: 抽象工厂通过对象组合创建抽象产品.工厂通过类集成创建抽象产品 抽象工厂创建多系列产品.工厂创建一种产 ...

  6. 代码编辑器的最终选择Sublime Text 2

    对于程序员,不是每一种语言都有很好的代码编辑器,VS这样的编辑环境+编译器也不能适合所有的语言,同时VS占用内存量很大,开几个VS,计算机就开始有点吃不消了.所以简便的代码编辑器很重要. 再Windo ...

  7. Javascript基本概念（语句和函数）

    语句 for语句 for语句中的初始化表达式,控制表达式和循环后表达式都是可选的,将这三个表达式省略,就会创建一个无线循环. ECMAScript中不存在块级作用域,因此在循环内容部定义的变量也可以在 ...

  8. python---连接MySQL第五页

    Connector/Python Connection Arguments A connection with the MySQL server can be established using ei ...

  9. collection set

    http://blog.csdn.net/humingfiy/article/details/7946408 Collection:List.SetMap:HashMap.HashTable 如何在它 ...

  10. POJ 3579 Median（二分答案+Two pointers）

    [题目链接] http://poj.org/problem?id=3579 [题目大意] 给出一个数列,求两两差值绝对值的中位数. [题解] 因为如果直接计算中位数的话,数量过于庞大,难以有效计算, ...