导航:首页 > 图片大全 > 如何用js实现点击图片时换图片
如何用js实现点击图片时换图片
发布时间：2024-10-20 19:30:36❶ JS实现点击一个按钮更换图片
你的代码差在少了"选择元素"这一步。
img1.src = "..images/DT2.JPG"这一步是没有作用的，因为img1你还没有定义。
正确的方法是让图片元素的id是img1，然后
document.getElementById('img1').src = "..images/DT2.JPG"
这样进行赋值。
document.getElementById('img1')这一步的作用就是选择图片元素。
这是针对此问题的测试页面
代码如下
<div class="DT">
<div>
<img id="img1" src="https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"
/>
</div>
</div>
<div style="text-align:center">
<input type="button" id="b1" value=" 放大 " onclick="fd();" />
<input type="button" id="b3" value="还原 " onclick="hy();" />
<input type="button" id="b2" value=" 缩小 " onclick="sx();" />
</div>
function fd() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_400x400.jpg"
}
function sx() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_180x180.jpg"
}
function hy() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"
}
❷ 如何用js实现点击图片切换另一图片，再次点击恢复
方法如下
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title></title>
</head>
<body>
<script>
window.onload=function(){
varImgbtn=document.getElementById('btn');
varImg=document.getElementById('img');
Imgbtn.onclick=function(){
if(Img.src=='http://dl.bi.sogou.com/images/2012/01/19/191337.png'){
Img.src='http://pic3.nipic.com/20090701/2847972_130628068_2.jpg';
}else{
Img.src='http://dl.bi.sogou.com/images/2012/01/19/191337.png'
}
}
}
</script>
<divid="bg">
<divid="btn">
<divid="txt">试客小兵</div>
<imgid="img"src="http://dl.bi.sogou.com/images/2012/01/19/191337.png">
</div>
</div>
</body>
</html>
Javascript被归类为直译语言，因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行，其他引擎则是逐行解译（SpiderMonkey会将解译过的指令暂存，以提高性能，称为实时编译），但由于V8的核心部份多数用Javascript撰写（而SpiderMonkey是用C++），因此在不同的测试上，两者性能互有优劣。
与其相对应的是编译语言，例如C语言，以编译语言编写的程序在运行之前，必须经过编译，将代码编译为机器码，再加以运行。
❸ HTML怎么设置点击一张图片换一张图片
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。
与如何用js实现点击图片时换图片相关的资料
- 月亮手抄报图片大全
- ps如何选中图片中图片
- vb拼图图片如何分割
- 如何给图片上的文字替换颜色
- 如何用js实现点击图片时换图片
- 如何应用套索工具圈出来的图片
- e站如何恢复图片书
- 图片素材如何打印
- 微信头像游戏图片大全
- 牙齿蛀牙虫图片大全
- 食堂装修效果图大全2015图片
- 如何挑选猪粉肠图片
- 香焦图片大全
- 如何使图片背景溶于word背景
- 表格如何设置批注插入图片
- 雾大的图片大全
- 皮皮虾头像图片大全
- 中国情人节图片大全
- pr插入的图片如何推动
- android如何上传多个图片
- 豆腐脑图片大全大图
- 名字装饰画图片大全
- 北极熊卡通图片大全
- 如何将图片添加到抖音表情
- 如何显示win10中图片文件夹
- pr如何把两张图片变成一个视频
- excel如何调整批量图片的间距
- 在班里如何设置高考倒计时图片
- 芒果奶盖图片大全
- 爱笔思画手机版如何扣黑底图片
- 如何在背景上加透明图片
- 如何黑视频加上背景图片
- 大于手机屏幕的图片如何截屏
- 如何制作插字图片
- 如何封面的图片
- 如何取出游戏里的图片
- ipad画画如何看图片
- 用手机如何把图片变成二维码
- 橡木与橡胶木如何区分图片
- 图片如何找到适合自己的第二份工作
- 如何把jpg图片变小
- 如何在图片上加爆炸特效