javascript - 鼠标单击更改另一张图像

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

您可以使用 JQuery 实现此目的

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

只需为您的开关图像指定“switch”的 ID，为原始灯泡图像指定“bulb”的 ID。