代码用途：

通过点击图片，来改变图片内容

代码：

 <!DOCTYPE html>

 <html>

 <body>

 <script>

 function changeImage()

 {

     element=document.getElementById('im')

     if (element.src.match("2"))

      {

           element.src="./1.jpg";

      }

     else

      {

           element.src="./2.jpg";

       }

 }

 </script>

 <img id="im" onclick="changeImage()" src="./2.jpg">

 <p>君莫笑是冠军~~</p>

 </body>

 </html>

效果图：

1.开始的时候，图片是个这样子的~

2.点击图片后，图片变成这样的啦~

JS之鼠标改变img的更多相关文章

  1. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  2. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  3. js获取select改变事件

    js获取select改变事件onchage前的值 和 onclick事件 <select id="wupin_id" name="wupin_id" on ...

  4. js实现鼠标的滑动

    js实现鼠标的滑动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. js获得鼠标的位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  7. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  8. JS 判断鼠标滚轮的上下滚动

    JS 判断鼠标滚轮的上下滚动   <script type="text/javascript"> var scrollFunc = function (e) { e = ...

  9. JS Event 鼠标拖拽事件

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

随机推荐

  1. 【转】JavaScript => TypeScript 入门

    几个月前把 ES6 的特性都过了一遍,收获颇丰.现在继续来看看 TypesScript(下文简称为 “TS”).限于经验,本文一些总结如有不当,欢迎指正. 官网有这样一段描述: TypeScript ...

  2. PHP隐藏版本号教程

    PHP本身并不启监听服务,所以预防扫描器扫描通过版本号判断漏洞,我们要隐藏的是http头处的版本号,而不是隐藏系统命令行处的版本号. 1.查看当前php版本号 访问一当前服务中的任意页面,截取响应数据 ...

  3. Apache支持TRACE请求漏洞处理方案

    trace和get一样是http的一种请求方法,该方法的作用是回显收到的客户端请求,一般用于测试服务器运行状态是否正常. 该方法结合浏览器漏洞可能造成跨站脚本攻击.修复方法如下: 编缉/etc/htt ...

  4. UNIX发展史简介

    1965年贝尔实验室(Bell Labs).通用电气(General Electric)和麻省理工学院(MIT)欲共同打造MULTICS(Multiplexed Information and Com ...

  5. h5的坑

    转自 http://www.mahaixiang.cn 解决各种坑 http://www.mahaixiang.cn/ydseo/1529.html

  6. 快捷键设置 keyiing.json

    // 快捷键设置 keyiing.json // 将键绑定放入此文件中以覆盖默认值 [     /* // 转换大写     {         "key" : "ctr ...

  7. MAVEN ECLIPSE JAR工程

    在eclipse 空白处点击鼠标右键选择新建 project 选择maven project: 选择Create a simple project Group ID: Artifact ID:创建项目 ...

  8. linux command useradd

    Linux command useradd [Purpose]        Learning linux command useradd to create a new user or update ...

  9. java集合框架图

  10. In-App Purchase iap 内付费 二次验证代码 (java 服务器端)

    参考网址:https://blog.csdn.net/a351945755/article/details/22919533 package com.yichangmao.buyVerify.Comm ...