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

You также может добиться этого без JQuery, используя инструкции if/else.

HTML Markup:

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

Вы можете добиться этого с JQuery

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

Просто дайте изображению вашего переключателя идентификатор «переключателя», а изображение оригинальной лампы - «колба».

Answer 3

Да, просто прикрепить класс к 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'); 
});​ 

В основном, что это делает: после щелчка на кнопке с подсветкой, он проверяет, имеет ли идентификатор BULB класс «лампочка». Если это не так, оно добавляет его. Если это так, он удаляет его.

Вы также можете стилизовать LightSwitch так, что у него есть руки курсор, как будто это ссылка, например, так:

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

JS FIDDLE ЗДЕСЬ:

http://jsfiddle.net/SDRQU/

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, который я написал, чтобы переключаться между изображением указанного в ГКЗ и другой, указанный в качестве чередующийся

Приведенный выше сценарий работает. See this.

Однако, если я изменю порядок изображения, он не работает. Возможно, потому что теперь есть два src, связанных с id="cnImage". Я все еще изучаю основы JavaScript.