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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
May 05 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
多个Vue项目部署到服务器的步骤记录
Oct 22 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
JavaScript事件列表解说
2006/12/22 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
详解使用React制作一个模态框
2019/03/14 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python中反射用法实例
2015/03/27 Python
python数据结构之图的实现方法
2015/07/08 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
python如何更新包
2020/06/11 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
PyCharm+Miniconda3安装配置教程详解
2021/02/16 Python
市场营销专业推荐信
2013/11/03 职场文书
企划主管岗位职责
2013/12/12 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
2015年仓库工作总结
2015/04/09 职场文书
公司年夜饭通知
2015/04/25 职场文书
《打电话》教学反思
2016/02/22 职场文书