javascript方式：    熟悉使用document.getElementById()取得节点对象

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <style>
  5. .div_n{
  6. width:300px;
  7. height:250px;
  8. border:1px solid gray;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. function changeSrc1()
  13.   {
  14.   document.getElementById("myImage").src="/images/2.gif"
  15.   }
  16. function changeSrc2()
  17.   {
  18.   document.getElementById("myImage").src="/images/1.gif"
  19.   }
  20. </script>
  21. </head>
  22.  
  23. <body>
  24. <div class="div_n">
  25. <a href="http://www.baidu.com">
  26. <img id="myImage" src="/images/1.gif"  onmouseover="changeSrc1()" onmouseout="changeSrc2()"/>
  27. </a>
  28. </div>
  29. </body>
  30.  
  31. </html>

css+div方式：  合理控制层的样式

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title> New Document </title>
  5.   <style>
  6.     .main{
  7.         width:300px;
  8.         height:250px;
  9.         border:1px solid gray;
  10.     }
  11.     .content{
  12.         width:150px;
  13.         height:160px;
  14.         border:1px solid gray;
  15.         background-image:url(images/2.gif);
  16.         background-repeat: no-repeat;
  17.     }
  18.     .content:hover{
  19.         background-image:url(images/3.jpg);
  20.     }
  21.     a{
  22.         text-decoration:none;
  23.     }
  24.   </style>
  25.  </head>
  26.  
  27.  <body>
  28.   <div class="main">
  29.     <a href="http://www.baidu.com/"><div class="content"></div></a>
  30.   </div>
  31.  </body>
  32. </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. html网页获取php网页数据等知识记录

    所有跟php有关的网页都必须在Apache服务器下打开.需要配置好confg.ini的文件路径. AJAX: 通过事件不断的向服务器发送请求,然后服务器会时时返回最新的数据,这就是AJAX的功能 PS ...

  2. 蜗牛爱课－ CGAffineTransformMakeRotation 实现一张图片的自动旋转

    self.locationTimer =[NSTimer scheduledTimerWithTimeInterval: 0.01 target: self selector:@selector(tr ...

  3. HDU 2473 - Junk-Mail Filter ，并查集的删点

    Problem Description Recognizing junk mails is a tough task. The method used here consists of two ste ...

  4. 文件搜索查找功能VC++

    1.搜索指定文件夹下的文件名和路径 #undef UNICODE #include <iostream> #include <string> #include <vect ...

  5. EditPlus 快速去重

  6. Web QQ自动强制加好友代码

    也许见过强行聊天的代码:  tencent://Message/?Uin=574201314&websiteName=www.oicqzone.com&Menu=yes 但是你应该不知 ...

  7. jQuery 的.data()方法

    jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to ...

  8. XML_PULL解析

    一.在Android应用中的XML文件来源 1.本地xml文件     本地XML文件可以放在应用根目录assets文件夹.res/xml.res/raw.SDcard卡.应用的data目录等: 除r ...

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

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

  10. EEPROM和flash的区别

    存储器分为两大类:ram和rom.ram就不讲了,今天主要讨论rom. rom最初不能编程,出厂什么内容就永远什么内容,不灵活.后来出现了prom,可以自己写入一次,要是写错了,只能换一片,自认倒霉. ...