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 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
JavaScript实现换肤功能
Sep 15 Javascript
谈谈JS中的!!
Dec 07 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
JS实现页面数据懒加载
Feb 13 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
pytorch标签转onehot形式实例
2020/01/02 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
高中生学习的自我评价
2013/12/14 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
个人年底工作总结
2015/03/10 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python