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。

Answer 2

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

HTML MARKUP：

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

基本上这样做是：一旦点击了lightswitch图片，它就会检查BULB的ID是否有一个“灯泡开启”类。如果没有，则添加它。如果确实如此，则将其删除。

您可能还想对lightswitch设置样式，使其具有手形光标，就好像它是一个链接一样，如下所示：

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

JS FIDDLE HERE：

http://jsfiddle.net/SDRQU/

Answer 3

您也可以使用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 4

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

我正在使用我编写的一般javascript在指定为src的图像和另一个指定为alt的图像之间翻转。

以上脚本有效。 See this

但是，如果我更改图像顺序，则无效。 可能是因为现在有两个src与id="cnImage"相关联。 我还在学习JavaScript的基础知识。

Answer 5

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