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. 为什么Underscore

    Underscore是什么? Underscore一个JavaScript实用库,提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象.它是这个问题的答案:“如果我在一个空白 ...

  2. log4j是什么

    一.什么是log4jLog4j 是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务器.NT的事 件记录器.UNIX S ...

  3. C#VS面向对象基础（二）

    这里我们接着上一篇博客,继续学习用C#实现面向对象中的概念.这里学习下边几个,当然我们还是通过动物比赛的例子. 多态:表示不同的对象可以执行相同的动作,但是通过它们自己的实现代码来执行.这里需要将父类 ...

  4. OpenGL鼠标旋转图像

    (鼠标旋转功能) #include <iostream> using namespace std; #include<gl/glut.h> GLfloat transx,tra ...

  5. (转载)iscroll.js的使用

    入门 Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化.每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的. 尽可能保持DOM结构的简洁.iScroll使用 ...

  6. text-overflow: ellipsis;省略号颜色设置

    参考stackoverfolow 想要给元素添加text-overflow: ellipsis;样式,必须保证改其父元素是块级元素,如果其是行级元素,可以通过设置display:block;或者dis ...

  7. Swift笔记3

    赋值运算符" = " let (x,y) =(10,45) var str = "luo" + "shaui"    //会得到luoshu ...

  8. JVM内存分配和回收

    本文内容来自<Java编程思想(第四版)>第二章<一切都是对象>和第五章<初始化与清理>.作为一个使用了好几年的Javaer,再次看编程思想的前面章节(不要问我为什 ...

  9. 异步方式向WPF ListBox控件中一条一条添加记录

    向ListBox绑定数据源时,如果数据量过大,可能会使得程序卡死,这是就需要一条一条的向ListBox的数据源中添加记录了,下面是个小Demo: 1.前台代码,就是一个ListBox控件 <Wi ...

  10. 限制TextBox输入，只能输入Double类型数字

    public class TextBoxDouble : TextBox { public TextBoxDouble() { KeyDown += TextBoxDouble_KeyDown; Te ...