效果预览：http://keleyi.com/keleyi/phtml/jstexiao/16.htm

代码如下:

 <!DOCTYPE html>

 <html>

 <head>

 <title>使用js改变图片-柯乐义</title>

 <script>

 function changeImage() {

 var element = document.getElementById('myimage');

 element.src = "http://keleyi.com/image/a/3cmla1pp.jpg";

 }

 </script>

 <body>

 </head>

 <h1>使用js改变图片</h1>

 <p>请点击按钮 <a href="http://keleyi.com/a/bjad/9isr0eoy.htm">原文</a></p>

 <img id="myimage" src="http://keleyi.com/image/a/q5l1xnmf.jpg" alt="足球宝贝" />

 <input name="keleyi" type='button' value="改变图片" onclick="changeImage()">

 </body>

 </html>

转载自：http://keleyi.com/a/bjad/9isr0eoy.htm

web前端汇总 ：http://www.cnblogs.com/jihua/p/webfront.html

使用javascript改变图片路径的更多相关文章

  1. css和javascript中图片路径的不同

    之前在写前端代码时,在图片路径的设置那里经常会遇到一个问题.比方说,我 (1)在根目录下面新建了个"images"文夹,里面放了张图片top.gif (2)在根目录下另外新建了两个 ...

  2. vue中如何动态的绑定图片，vue中通过data返回图片路径

    在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. 效果:

  3. Javascript 将图片的绝对路径转换为base64编码

    Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var i ...

  4. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  5. JavaScript实现图片切换

    页面内容:一个按钮标签  一个Img标签 实现原理:通过修改Img标签的src属性,实现图片的切换 备注:代码中flag变量仅仅用作标记,也可以直接用Img标签的src属性进行判断,不过在判断时候不能 ...

  6. webpack4 前端框架基础配置实例-解决css分离图片路径问题

    1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...

  7. JavaScript校验图片格式及大小

    <!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...

  8. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  9. 通过html5的range属性动态改变图片的大小

    range属性已经是很成熟的属性了,我们可以使用这个属性进行动态调整图片的宽度,其中原理在于通过不断获取range的值,并赋予给所需要的图片,进而达到动态改变图片的效果.下面贴出具体的代码,主要参照了 ...

随机推荐

  1. Tornado框架中视图模板Template的使用

    上文的程序中有这样一段: class MessageHandler(tornado.web.RequestHandler): def get(self): self.write(''' <htm ...

  2. Kafka随笔一

    一.KafKa所涉及到的名词概念: 1.    Topic:用于划分Message的逻辑概念,一个Topic可以分布在多个Broker上. 2.    Partition:是Kafka中横向扩展和一切 ...

  3. Windows系统盘占用空间分析

    磁盘分析 本机的系统盘是C盘,操作系统是Windows 7 专业版,通过磁盘属性可以看到C盘的已用空间是69.4G. 而我们运行自己编写的脚本(脚本程序参考附录,统计原理:计算目录下各个文件的大小,然 ...

  4. 前端学PHP之运算符

    × 目录 [1]总括 [2]算术运算符 [3]赋值运算符[4]位运算符[5]比较运算符[6]错误控制[7]逻辑运算符[8]字符串连接[9]数组运算符 前面的话 运算符是可以通过给出的一或多个表达式来产 ...

  5. 趣味GPS

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 简介 GPS的全称是全球定位系统(the Global Positioning S ...

  6. Android应用中实现系统“分享”接口

    在android下各种文件管理器中,我们选择一个文件,点击分享可以看到弹出一些app供我们选择,这个是android系统分享功能,我们做的app也可以出现在这个列表中. 第一步:在Manifest.x ...

  7. 如何设置文本文件的默认保存编码为UTF-8

    原文:http://answers.microsoft.com/en-us/windows/forum/windows_7-windows_programs/default-utf-8-encodin ...

  8. Jquery通过Ajax方式来提交Form表单

    今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...

  9. ASP.NET CMS模板培训教程

    注意:此文档中出现所有的类,都是公司内部的,也就是说,只是给公司内部人员培训的一篇文章而已,如果其他的人看到了, 看不懂里面的类,那是因为这都是我公司内部的框架. 首先是进入我们的系统的后台,然后选择 ...

  10. 【集合框架】JDK1.8源码分析之IdentityHashMap（四）

    一.前言 前面已经分析了HashMap与LinkedHashMap,现在我们来分析不太常用的IdentityHashMap,从它的名字上也可以看出来用于表示唯一的HashMap,仔细分析了其源码,发现 ...