2

3つの画像があります。1つ目は照明スイッチ、2つ目は「オフ」の電球、3つ目は「オン」の電球です。ユーザーが照明スイッチの画像をクリックすると、「オフ」の電球の画像が「オン」の電球の画像に変わります。これは可能ですか？

これらは画像です：

スイッチ 電球をオフにします 電球に

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

スイッチイメージに「switch」のIDを指定し、元の電球イメージに「bulb」の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 FIDDLE HERE：

http://jsfiddle.net/SDRQU/

于 2012-06-26T15:24:17.400 に答える
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フィドルの例

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

srcとして指定された画像とaltとして指定された別の画像を切り替えるために作成した一般的なJavaScriptを使用しています。

上記のスクリプトは機能します。これを参照してください。

ただし、画像の順序を変更しても機能しません。おそらく、に関連付けられたsrcが2つあるため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 に答える