效果预览：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. PHP的静态和接口

    静态普通成员普通成员属于对象//静态成员//静态成员属于类//static 关键字 变成静态成员/*class ren {    public $name;    public static $zho ...

  2. iOS-几大框架的介绍

    1.Objective-C之Foundation框架 概述 我们前面的章节中就一直新建Cocoa Class,那么Cocoa到底是什么,它和我们前面以及后面要讲的内容到底有什么关系呢?Objectiv ...

  3. Spring学习记录(十)---使用FactoryBean配置Bean

    之前学了,配置bean可以用普通全类名配置.用工厂方法配置,FactoryBean又是什么呢 有时候配置bean要用到,IOC其他Bean,这时,用FactoryBean配置最合适. FactoryB ...

  4. 人之初，性本动 - G2 2.1 发布

    前言 随着可视化进入深水区,G2面临了越来越多交互上的需求.动画是提升交互必不可少的一部分,也是之前G2的薄弱环节.这个版本里我们开发并替换了动画底层,统一了时间轴,使G2的动画性能大大提升,并提供了 ...

  5. 跟我学Angular2（1-初体验）

    0.导言 Angular1作为最流行的前端MV*框架,给前端开发带来了极大的便利性.但是,仍然有许多不好的地方已经很难再改变了.Angular团队根据WEB发展的趋势和Angular1中积累的经验来开 ...

  6. MySQL数据库实例参数对比脚本

    如何对比两个MySQL实例的参数情况,生产中常会有这样的需求,最近写了个python脚本,可基本实现该需求. 脚本 #!/usr/bin/python import MySQLdb,sys def f ...

  7. 高版本->低版本迁移，低版本客户端连接高版本数据库EXP导出报错EXP-00008,ORA-01455,EXP-00000

    生产环境: 源数据库:RHEL + Oracle 11.2.0.3 目标数据库:HP-UX + Oracle 10.2.0.4   需求:迁移部分表  11.2.0.3-->10.2.0.4,若 ...

  8. SDN/NFV若干问题

    1.首先谈一谈网络技术和组网技术的关系 网络可分为两层:业务网.承载网.业务网主要是组织业务系统,而承载网主要是用来传输信息流:包括传送网(点到点数据专线).数据网(端到端连接).内容分发网(点到多点 ...

  9. VS2013预览版安装 体验截图

    支持与msdn帐号链接: 不一样的团队管理: 新建项目:

  10. C# GZip对字符串压缩和解压

    /// <summary> /// 压缩方法 /// </summary> public static string CompressString(string str) { ...