2

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

这些是图像：

转变 关闭灯泡 在灯泡上

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

5 回答 5

2

您可以使用 JQuery 来实现这一点

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

只需给您的开关图像一个 ID 为“开关”，您的原始灯泡图像一个 ID 为“灯泡”。

于 2012-06-26T15:10:24.753 回答
1

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

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

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

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

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

JS 小提琴在这里：

http://jsfiddle.net/SDRQU/

于 2012-06-26T15:24:17.400 回答
1

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

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 小提琴示例

于 2012-06-26T20:37:52.817 回答
0 
<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 的图像之间翻转。

上面的脚本有效。看到这个。

但是，如果我更改图像顺序，它将不起作用。可能是因为现在有两个 src 与id="cnImage". 我仍在学习 JavaScript 的基础知识。

于 2018-03-03T04:53:42.560 回答
0 

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

于 2018-10-18T04:26:43.593 回答