Onmouseclick改變另一個圖像

我有三個圖像：第一個是燈開關，第二個是「關閉」燈泡，第三個是「開」燈泡。當用戶點擊燈開關圖像時，我希望它將「關閉」燈泡圖像更改爲「開啓」燈泡圖像。這可能嗎？Onmouseclick改變另一個圖像

這些圖像：

switch off light bulb on light bulb

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

來源

2012-06-26 user1471646

是的，到目前爲止你有什麼？ – jeroen

上面添加的代碼 – user1471646

只是一個小提示 - 使用JQuery來實現這一點要容易得多。 – Danny

你也可以通過使用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 Fiddle Example

來源

2012-06-26 20:37:52 JSW189

您可以使用jQuery

實現這一目標

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

只要給你的開關圖像一個ID「開關」，你的原始燈泡圖像的ID爲「燈泡」。

來源

2012-06-26 15:10:24 Danny

是啊，他們只是在一類到LightSwitch的形象，做這樣的事情：

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

THEN使用jQuery：

$('.lightswitch').click(function() { 
    $('#bulb').toggleClass('bulb-on'); 
});

基本上這樣做的是：一旦點擊了lightswitch圖片，它將檢查BULB的ID是否有一類「燈泡點亮」。如果沒有，它會添加它。如果確實如此，它就會將其刪除。

您可能還需要樣式的電燈開關，以便它有一個手形光標就好像它是一個鏈接，像這樣：

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

JS FIDDLE位置：

http://jsfiddle.net/SDRQU/

來源

2012-06-26 15:24:17

我在Danny的回答中看到的唯一問題是，它不會允許你切換我不相信的lightswitch。上述解決方案將打開和關閉燈泡。如果這是你正在嘗試，這是解決方案。可能有一個稍微更乾淨的方式來做到這一點，但這是有效的。 –

感謝您的快速響應，我現在已經設置好了，但是燈泡沒有顯示在網頁上，只有燈光開關？ – user1471646

我正在製作一個JSFiddle。當我完成時，我會將它鏈接到這裏。 –

<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和其他指定的圖像之間翻轉一般的javascript中高音。

上述腳本有效。 See this。

但是，如果我更改圖像順序，它不起作用。可能是因爲現在有兩個src與id="cnImage"關聯。我仍然在學習JavaScript的基礎知識。

來源

2018-03-03 04:53:42 kavanrat

Onmouseclick改變另一個圖像

回答

相關問題