如何用js实现点击图片切换另一图片，再次点击恢复？
<script>
function change_pic()
{
var imgObj = document.getElementById("caocao_pic");
if(imgObj.src == "images/caocao.png")
{imgObj.src="images/diaochan.png";}
else
{imgobj.src="images/caocao.png";}
}
</script>
<img src="images/caocao.png" class="wujiang_pic_size" id="caocao_pic" onClick="change_pic()">
点击图片没有反应，不知为何 展开
方法如下
<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.bizhi.sogou.com/images/2012/01/19/191337.png') {
Img.src='http://pic3.nipic.com/20090701/2847972_130628068_2.jpg';
}else{
Img.src='http://dl.bizhi.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.bizhi.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编程
代码示例：
<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.bizhi.sogou.com/images/2012/01/19/191337.png') {
Img.src='http://pic3.nipic.com/20090701/2847972_130628068_2.jpg';
}else{
Img.src='http://dl.bizhi.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.bizhi.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_百度百科
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>
<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()">
谢谢，代码运行非常好。但是还有些问题，就是下面这两行代码是如何实现的？没太看懂
varFlag=(imgObj.getAttribute("src",2)=="images/caocao.png")
imgObj.src=Flag?"images/diaochan.png":"images/caocao.png";
}
这代码我使用的是三目运算符完成的（三目运算符最大的好处就是可以减少好多的代码）。当然你也可以改成IF这样的语句。代码如下：
<script>
function change_pic(){
var imgObj = document.getElementById("caocao_pic");
if(imgObj.getAttribute("src",2)=="images/caocao.png"){
imgObj.src="images/diaochan.png";
}else{
imgObj.src="images/caocao.png";
}
}
</script>
<img src="images/caocao.png" class="wujiang_pic_size" id="caocao_pic" onClick="change_pic()">
<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
|
广告 您可能关注的内容 |
