Javascript Onmouseclick 更改另一个图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11210164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Onmouseclick change another image
提问by user1471646
I have three images: the first is a light switch, the second is an "off" light bulb and the third is an "on" light bulb. When a user clicks on the light switch image, I would like it to change the "off" light bulb image into the "on" light bulb image. Is this possible?
我有三个图像：第一个是电灯开关，第二个是“关闭”灯泡，第三个是“打开”灯泡。当用户单击灯开关图像时，我希望它将“关闭”灯泡图像更改为“打开”灯泡图像。这可能吗？
These are the images:
这些是图像：
Javascript:
Javascript：
img2=new Image();
img2.src="images/RCS/lightbul2-250.gif";
img3=new Image();
img3.src="images/RCS/lightbuld1.gif";
function changeImage() {
document.getElementById('myImage').src=img2.src;
}
function changeImage2() {
document.getElementById('myImage').src=img3.src;
}
HTML:
HTML：
<img id="myImage" onmouseover="changeImage()" onmouseout="changeImage2()" border="0" width="250" height="141" src="images/RCS/lightbulb1-100.gif">
采纳答案by JSW189
You can also achieve this without JQuery by using if/else statements.
您也可以使用 if/else 语句在没有 JQuery 的情况下实现此目的。
HTML Markup:
HTML 标记：
<a href="#" onClick="changeImage()"><img src="lightSwitch.jpg"></a>
<img id="myImage" src="lightOff.jpg">
Javascript:
Javascript：
function changeImage() {
if(document.getElementById('myImage').src == 'lightOff.jpg') {
document.getElementById('myImage').src = 'lightOn.jpg';
} else if(document.getElementById('myImage').src == 'lightOn.jpg') {
document.getElementById('myImage').src = 'lightOff.jpg';
}
}
回答by Danny
You can achieve this with JQuery
您可以使用 JQuery 实现此目的
$(document).ready(function(){
$('#switch').click(function(){
$('#bulb').attr('src', 'bulbOn.jpg');
});
});
Just give your switch image an ID of 'switch' and your original bulb image an id of 'bulb'.
只需将您的开关图像的 ID 指定为“开关”，并将您的原始灯泡图像的 ID 指定为“灯泡”。
回答by Mike Legacy
Yeah, just attach a class to the lightswitch image and do something like this:
是的，只需将一个类附加到灯开关图像并执行以下操作：
HTML MARKUP:
HTML 标记：
<img src="http://i.stack.imgur.com/wLSuu.gif" class="lightswitch">
<div id="container">
<div id="bulb" class=""></div>
</div>
CSS:
CSS：
.toggle-off { display: none; }
#bulb { height: 100%; width: 100%; background: url('http://i.stack.imgur.com/l9EOR.gif')
center center no-repeat; }
.bulb-on { background: url('http://i.stack.imgur.com/TnKyp.gif') center center no-repeat
!important; }
.lightswitch { float: left; }
.clear { clear: both; }
#container { width: 300px; height: 300px; float: right; }
? THEN USE JQUERY:
? 然后使用 JQUERY：
$('.lightswitch').click(function() {
$('#bulb').toggleClass('bulb-on');
});?
Basically what this is doing is: once the lightswitch picture is clicked, it is checking to see if either the ID of BULB has a class of "bulb-on". If it doesn't, it is adding it. If it does, it is removing it.
基本上这是做什么的：一旦点击了灯开关图片，它就会检查是否有一个 BULB 的 ID 具有“灯泡开启”类。如果没有，它正在添加它。如果是，它正在删除它。
You may also want to style the lightswitch so that it has a hand cursor as if it is a link, like so:
您可能还想设置灯开关的样式，使其具有一个手形光标，就好像它是一个链接一样，如下所示：
.lightswitch { cursor: hand; cursor: pointer; }
JS FIDDLE HERE:
JS 小提琴在这里：
回答by kavanrat
<script type="text/javascript">
function altsrcImg(cnImage) {
var src = document.getElementById(cnImage).src;
var alt = document.getElementById(cnImage).alt;
document.getElementById(cnImage).src = alt;
document.getElementById(cnImage).alt = src;
}
</script>
<img id="cnImage" src="TnKyp.gif" alt="l9EOR.gif"><br>
<img id="cnImage" onClick="altsrcImg(this.id)" src="wLSuu.gif">
I am using a general javascript I wrote to flip between image specified as src and another specified as alt.
我正在使用我编写的通用 javascript 在指定为 src 的图像和指定为 alt 的另一个图像之间翻转。
The above script works. See this.
上面的脚本有效。看到这个。
However if I change the image order it does not work.
Probably because there is now two src associated with id="cnImage".
I am still learning the basics of JavaScript.
但是，如果我更改图像顺序，它将不起作用。可能是因为现在有两个 src 与id="cnImage". 我仍在学习 JavaScript 的基础知识。
回答by Felipe Calderon
<img src="../switch1.png" id="switch1" onclick="ON(1)"> <img
src="../switch2.png" id="switch2" onclick="OFF(0)"> <img
src="../lighON.png" id="ON"> <img src="../lighOFF.png" id="OFF">
<script> function ON(X){ if(X=1) { document.getElementById("ON").style.display=block;
document.getElementById("OFF").style.display=none;
document.getElementById("switch1").style.display=block;
document.getElementById("switch2").style.display=none; }else{
document.getElementById("ON").style.display=none;
document.getElementById("OFF").style.display=block;
document.getElementById("switch1").style.display=none;
document.getElementById("switch2").style.display=block; } y=0;
</script>
css
#ON,#OFF{position:absolute;top:30px;left:30px;width:50px; height:50px;}
#switch1,#switch2{position:absolute;top:30px;left:330px;width:50px; height:50px;}
#OFF,#switch2{dispay:none;}
