如何用js实现点击图片切换另一图片,再次点击恢复?
发布网友
发布时间:2022-04-23 12:29
我来回答
共6个回答
热心网友
时间:2022-04-19 09:44
方法如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<script>
window.onload=function(){
var Imgbtn=document.getElementById('btn');
var Img=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>
<div id="bg">
<div id="btn">
<div id="txt">试客小兵</div>
<img id="img" src="http://dl.bi.sogou.com/images/2012/01/19/191337.png">
</div>
</div>
</body>
</html>
扩展资料
JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。
直译语言的弱点是安全性较差,而且在JavaScript中,如果一条运行不了,那么下面的语言也无法运行。而其解决办法就是于使用try{}catch(){}︰
Javascript被归类为直译语言,因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行,其他引擎则是逐行解译(SpiderMonkey会将解译过的指令暂存,以提高性能,称为实时编译),但由于V8的核心部份多数用Javascript撰写(而SpiderMonkey是用C++),因此在不同的测试上,两者性能互有优劣。
与其相对应的是编译语言,例如C语言,以编译语言编写的程序在运行之前,必须经过编译,将代码编译为机器码,再加以运行。
参考资料:百度百科 JavaScript编程
热心网友
时间:2022-04-19 11:02
不需要这么麻烦的,10多年前就有超级简单的方法,现在反而搞的更麻烦了。
HTML对象都有onmouseover和onclick方法,可以在这个方法上改变图片的src属性就行了。
onmouseout再改回来,不建议使用onclick,因为有时候图片上会有链接,点击可以打开,
用onmouseover鼠标指上去的时候就切换图片,这样浏览的人也更方便。
代码如下,也可以把参数包进JS文件或数据文件里,这样可以用数据库调或者批量处理
<img src="img/1.png" onmouseover="this.src='img/2.png';" onmouseout="this.src='img/1.png';"></img>
热心网友
时间:2022-04-19 12:37
代码示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<script>
window.onload=function(){
var Imgbtn=document.getElementById('btn');
var Img=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>
<div id="bg">
<div id="btn">
<div id="txt">试客小兵</div>
<img id="img" src="http://dl.bi.sogou.com/images/2012/01/19/191337.png">
</div>
</div>
</body>
</html>
扩展资料:
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。
参考资料:javascript_百度百科
热心网友
时间:2022-04-19 14:28
<script>
function change_pic(){
var imgObj = document.getElementById("caocao_pic");
var Flag=(imgObj.getAttribute("src",2)=="images/caocao.png")
imgObj.src=Flag?"images/diaochan.png":"images/caocao.png";
}
</script>
<img src="images/caocao.png" class="wujiang_pic_size" id="caocao_pic" onClick="change_pic()">
热心网友
时间:2022-04-19 16:36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何用js实现点击图片切换为另一图片,再次点击恢复到原图片</title>
</head>
<body>
<div id="button">
<img id="picts" src="../images/angels.jpg" alt="">
</div>
<script>
function change_pic(){
var button = document.getElementById("button");
var picts = document.getElementById("picts");
button.onclick = function(){
if(picts.getAttribute("src",2) == "../images/angels.jpg"){
picts.setAttribute("src","../images/attrach.jpg");
}else{
picts.setAttribute("src","../images/angels.jpg");
};
}
}
change_pic();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
热心网友
时间:2022-04-19 19:01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="img/doublel.jpg" width="200" height="150"/>
</body>
<script>
var image=document.querySelector('img');
image.onclick=function (){
var mysrc=image.getAttribute('src');
if(mysrc=='img/doublel.jpg'){
image.setAttribute('src','img/timg.jpg');
}else{
image.setAttribute('src','img/doublel.jpg');
}
}
</script>
</html>
js 如何控制 按钮 点击换图片默认一张图 点击换另一张 再点击就恢复默...
js方法 function changeSrc(){ var imgObj = document.getElementById("imgObj");if(imgObj.src=="默认路径"){ imgObj.src = "新图片路径";}else{ imgObj.src = "默认路径";} }
如何用js实现点击图片切换另一图片,再次点击恢复?
方法如下 window.onload=function(){ var Imgbtn=document.getElementById('btn');var Img=document.getElementById('img');Imgbtn.onclick=function(){ if(Img.src=='http://dl.bizhi.sogou.com/images/2012/01/19/191337.png') { Img.src='http://pic3.nipic.com/20090701...
js 如何控制 按钮 点击换图片默认一张图 点击换另一张 再点击就恢复默...
少个= 改成。if(Img.src=='img/任务开始.png')
如何用js实现图片自动切换如何用js实现图片自动切换
threejs怎么点击按钮切换相机?用锤子对准相机敲一敲就可以切换了 js实现标签切换功能?最直接的方法全部放在一个controller里,点(ng-click)不同的tab,请求数据,并修改tab-content的ng-include切换templateUrl复杂一点(推荐):不同的tab对应不同的路由(或者叫state),由state切换controller,templateUrl js图片轮...
js 控制 点击按钮 将其背景图 换成另一张 再次点击恢复默认图片
//反向自动切换 function reverse(){ window.clearInterval(front);after=window.setInterval("up()",1000)} //暂停 function pause(){ window.clearInterval(front);window.clearInterval(after);} <BODY> </BODY>
如何用js实现点击图片切换另一图片,再次点击恢复?
window.onload=function(){ var Imgbtn=document.getElementById('btn');var Img=document.getElementById('img');Imgbtn.onclick=function(){ if(Img.src=='http://dl.bizhi.sogou.com/images/2012/01/19/191337.png') { Img.src='http://pic3.nipic.com/20090701/2847972_13062806...
js点击图片换图片,再点击则回到上一张
document.getElementById("open1").src=="图片/最新论坛图片/cate_open.gif" 这句有问题,左右两边是不相等的,所以,一直在执行else中的语句你可以在else中加一句alert(document.getElementById("open1").src);来显示一下,由此来判断if中左右是否相等 ...
angularjs中点击图片时,变成另外一张图片
<my-widget> </my-widget> // app.js var app = angular.module("MyApp", []);app.directive("myWidget", function() { var linkFunction = function(scope, element, attributes) { var imag = element.children()[0]; $(imag).on("click"...
js鼠标单击实现图片切换?
1、提前准备一组图片,将图片名称设置一定规律:例如 img1.jpg、img2.jpg 2、编写鼠标点击事件 3、在鼠标点击时间里,判断鼠标点击次数 4、根据不同次数,显示不同的图片 $(function(){ var items=new Arrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"); v...
如何用js实现鼠标滑过图片切换另一张图片
1、准备切换图片素材,一般是两张,如图,放入img文件夹,跟HTML同级。2、然后用img嵌入到网页,嵌入其中的一张,另外一张待会切换。3、如图,现在是静态的,鼠标放上去也不会产生切换反应,因为没有用JS。4、如图,获取img,转成JS对象,加个[0]就可以转js对象了。5、然后设定经过事件,切换成另一...