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. ASP.NET中怎样才能使自己的代码运行的效率更高

    一.网页设计相关: 1,做好页面布局和内容规划,只放置合适的内容,并尽可能使页面设计的最小. 2,使用好的网页编辑器,如DW,FP,不要用VS自带的编辑器,因为它会产生很多无用的沉余代码,而且设计的界 ...

  2. c#部分常用方法

    此文章不断补充 1.判断该字符串是否存在于字符串数组中 string[] arr = {"aaa","bbb","aba","cc ...

  3. BestCoder Round #75 1002 - King's Phone

    问题描述 阅兵式上,国王见到了很多新奇东西,包括一台安卓手机.他很快对手机的图形解锁产生了兴趣. 解锁界面是一个 3×33 \times 33×3 的正方形点阵,第一行的三个点标号 1,2,31, 2 ...

  4. Redis的安装和配置

    在网站redis.io复制下载链接 wget http://download.redis.io/releases/redis-3.0.5.tar.gz tar zxvf redis-3.0.5.tar ...

  5. Flink Program Guide （4） -- 时间戳和Watermark生成（DataStream API编程指导 -- For Java）

    时间戳和Watermark生成 本文翻译自Generating Timestamp / Watermarks --------------------------------------------- ...

  6. PHP学习笔记-数组(1)

    1-1 数组定义 1.什么是数组? 所谓数组,就是相同数据类型的元素按一定顺序排列的集合,就是把有限个类型相同的变量用一个名字命名,然后用编号区分他们的变量的集合,这个名字称为数组名,编号称为下标.组 ...

  7. python基础（四）

    内置函数 callable() #判断是否能够被调用执行,可以调用返回True,例如函数和类 chr() #将ascii值转换为字符,例如print(chr(65) )输出为a ord()#将字符转换 ...

  8. 【自学php】第一天-macbook上配置php

    今天MacBook到手了,就正式开始学习php了.先搭个环境,由于MacBook自带了Apache和php所以只要修改下配置启动就可以了. 1.启用root用户(如果不启用root,下面的命令前都要加 ...

  9. Android-Ant自动编译打包android项目 -- 2 ----签名与渠道包

    上篇介绍了怎么使用ant自动编译打包现有的android项目,这篇将继续介绍如果如何在ant打包应用的时候加入签名信息以及自动打包渠道包. 1. 加入签名信息: 在项目的根目录下建一个ant.prop ...

  10. KDE子项目一览 good

    https://www.kde.org/applications/development/ https://www.kde.org/applications/graphics/ https://www ...