Onmouseclick更改另一个图像

Question

我有三张图片:第一张是电灯开关，第二张是“关”的灯泡，第三张是“开”的灯泡。当用户单击电灯开关图像时，我希望它将“关”灯泡图像更改为“开”灯泡图像。这个是可能的吗？

以下是图片：

​

​

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：

<img id="myImage" onmouseover="changeImage()" onmouseout="changeImage2()" border="0" width="250" height="141" src="images/RCS/lightbulb1-100.gif">

Answer 1

您也可以通过使用if/else语句在没有JQuery的情况下实现这一点。

HTML标记：

<a href="#" onClick="changeImage()"><img src="lightSwitch.jpg"></a>
<img id="myImage" src="lightOff.jpg">

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';
    }
}

JS Fiddle Example

Answer 2

您可以使用JQuery实现这一点

$(document).ready(function(){
     $('#switch').click(function(){
          $('#bulb').attr('src', 'bulbOn.jpg');
     });
});

只需给你的开关镜像一个ID为' switch‘，给你的原始灯泡镜像一个id为' bulb’。

Answer 3

是的，只需将一个类附加到lightswitch图像，并执行以下操作：

HTML标记：

<img src="http://i.stack.imgur.com/wLSuu.gif" class="lightswitch">

<div id="container">
<div id="bulb" class=""></div>
</div>

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; }

然后​使用JQUERY：

$('.lightswitch').click(function() {
   $('#bulb').toggleClass('bulb-on');
});​

基本上这是这样做的:一旦点击了灯具开关图片，它就会检查灯泡的ID是否有一个“灯泡开”的类别。如果没有，它就会添加它。如果它这样做了，它正在删除它。

您可能还希望设置灯光开关的样式，使其具有手形光标，就像它是一个链接一样，如下所示：

.lightswitch { cursor: hand; cursor: pointer; }

JS小提琴在这里：

http://jsfiddle.net/SDRQU/