JS动态修改图片的URL(src)的方法


Posted in Javascript onApril 01, 2015

本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下:

下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的

<!DOCTYPE html>
<html>
<head>
<script>
function changeSrc()
{
document.getElementById("myImage").src="hackanm.gif";
}
</script>
</head>
<body>
<img id="myImage" src="compman.gif" width="107" height="98">
<br><br>
<input type="button" onclick="changeSrc()" value="Change image">
<p><b>Note:</b> The src property can be changed at any time. 
However, the new image inherits the height and width
attributes of the original image,
if not new height and width properties are specified.</p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
解javascript 混淆加密收藏
Jan 16 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
javascript的push使用指南
Dec 05 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
js消除图片小游戏代码
Dec 11 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
详解Vue之事件处理
Jul 10 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
JavaScript之数组(Array)详解
Apr 01 #Javascript
JavaScript数据类型详解
Apr 01 #Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 #Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 #Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 #Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 #Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 #Javascript
You might like
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
js友好的时间返回函数
2016/08/24 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
js微信分享实现代码
2020/10/11 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
python列表使用实现名字管理系统
2019/01/30 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
python操作gitlab API过程解析
2019/12/27 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
Python csv文件记录流程代码解析
2020/07/16 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
如何写一个自定义标签
2012/12/28 面试题
公司领导推荐信
2013/11/12 职场文书
检察官就职演讲稿
2014/01/13 职场文书
创业计划书撰写原则
2014/01/25 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
高中学生评语大全
2014/04/25 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android