CODEWITHSUNDEEP
javascripthtmlcss
user1471646
user1471646

Reputation: 55

Onmouseclick change another image

I have three images: the first is a light switch, the second is an "off" light bulb and the third is an "on" light bulb. When a user clicks on the light switch image, I would like it to change the "off" light bulb image into the "on" light bulb image. Is this possible?

These are the images:

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

Upvotes: 2

Views: 25356

Answers (5)

Felipe Calderon
Felipe Calderon

Reputation: 1

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

Upvotes: 0

kavanrat
kavanrat

Reputation: 23

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

I am using a general javascript I wrote to flip between image specified as src and another specified as alt.

The above script works. See this.

However if I change the image order it does not work. Probably because there is now two src associated with id="cnImage". I am still learning the basics of JavaScript.

Upvotes: 0

JSW189
JSW189

Reputation: 6325

You can also achieve this without JQuery by using if/else statements.

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

Upvotes: 1

Mike Legacy
Mike Legacy

Reputation: 1066

Yeah, just attach a class to the lightswitch image and do something like this:

HTML MARKUP:

<img src="https://i.sstatic.net/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('https://i.sstatic.net/l9EOR.gif')    
center center no-repeat;  }

.bulb-on { background: url('https://i.sstatic.net/TnKyp.gif') center center no-repeat 
!important; }

.lightswitch { float: left; }

.clear { clear: both; }

#container { width: 300px; height: 300px; float: right; }

​ THEN USE JQUERY:

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

Basically what this is doing is: once the lightswitch picture is clicked, it is checking to see if either the ID of BULB has a class of "bulb-on". If it doesn't, it is adding it. If it does, it is removing it.

You may also want to style the lightswitch so that it has a hand cursor as if it is a link, like so: 

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

JS FIDDLE HERE:

http://jsfiddle.net/SDRQU/

Upvotes: 1

Danny
Danny

Reputation: 468

You can achieve this with JQuery

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

Just give your switch image an ID of 'switch' and your original bulb image an id of 'bulb'.

Upvotes: 2

Related Questions