效果预览：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. iOS----- Crash 分析（文三）- 符号化崩溃日志

    未符号化的崩溃日志就象一本天书,看不懂,更别谈分析崩溃原因了.所以我们在分析日志之前,要把日志翻译成我们可以看得懂的文字.这一步我们称之为符号化. 在iOS Crash分析(文一)中已经提到过符号化的 ...

  2. angularjs揭秘

    angularjs揭秘

  3. 分享几个.NET WinForm开源组件，纪念逐渐远去的WinForm。。。

    前面3个月的时间内,这些.NET开源项目你知道吗?系列文章已经发表了3篇,共计45个平时接触比较少,曾经默默无闻的.NET开源项目,展示给大家,当然不是每个人都能用得上,但也的确是有些人用了,反响还不 ...

  4. Openfire/XMPP学习之——Openfire的安装、配置

    一.Openfire下载: 官方下载:http://www.igniterealtime.org/downloads/index.jsp 在官方下载站点,可以获取Windows.Linux.Mac三种 ...

  5. Python学习第一弹——Python环境搭建

    一.Python简介: Python,是一种面向对象.解释型计算机程序设计语言,由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年.Python语法简洁而清晰,具有 ...

  6. MySQL中RESET SLAVE和RESET MASTER的区别

    RESET SLAVE的语法如下: RESET SLAVE [ALL] [channel_option] channel_option: FOR CHANNEL channel 其中,channel_ ...

  7. [Keras] mnist with cnn

    典型的卷积神经网络. Keras傻瓜式读取数据:自动下载,自动解压,自动加载. # X_train: array([[[[ 0., 0., 0., ..., 0., 0., 0.], [ 0., 0. ...

  8. 1Z0-053 争议题目解析154

    1Z0-053 争议题目解析154 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 154.A database is running in ARCHIVELOG mode and ...

  9. Anliven - 一碗毒鸡汤

    什么是你的核心动力,支撑着你持续前进? 什么是你的加速度,激发你全部的潜能和勇气? 你的核心动力应该来自于: 家人与朋友的信任.包容与期待 你本应承担的责任 对自己有所要求,有所期待,你本应更好 而你 ...

  10. Azure ARM (14) 设置ARM VM的Availability Set

    <Windows Azure Platform 系列文章目录> 参考资料:https://gallery.technet.microsoft.com/Set-Azure-Resource- ...