javascript - 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

你可以用 JQuery 实现这个

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

只需为您的开关图片指定一个 ID“开关”，为您的原始灯泡图片指定一个 ID“灯泡”。