-4

Hey guys i really need some help with this! So i need to change an image when you click on it to another one. Essentially its a sound button so when its clicked it shows mute.

So far I'm completely baffled and have no idea where to start i know i can use Jquery/Javascript. Please help me!! here is my code:

    <div id= "Mute">
    <img class="BeforeClick"src="images/BeforeClickMute.png" width="140" height="126"/>
    <img class="AfterClick"src="images/AfterClickMute.png" width="140" height="126" />
    <p>Mute</p>
    </div>

also this is my css code

    .BeforeClick {
position:absolute;
z-index:9;
left:245px;
top:340px;  
}

    .AfterClick {
position:absolute;
z-index:8;
left:245px;
top:340px;  
}
user1584988
  • 15
  • 1
  • 4
  • 2
    "Give me teh codez" - sorry I won't. You should show what you have tried. If I just give you the code, you will never learn Javascript. – kapa Aug 09 '12 at 22:33
  • Copy title, paste into google, first result: [Changing the image source using jQuery](http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery) – MrOBrian Aug 09 '12 at 22:36
  • check attr and on in JQUERY they will give you some ideas, then try to write some simple code and finally when you need additional help post your code here to get a fast answer. – Frenchi In LA Aug 09 '12 at 22:38

2 Answers2

2
$(function(){ /* on document load */
    $('img').click(function(){ /* click handler for images */
        if($(this).attr('src') === 'images/BeforeClickMute.png'){ /* check source */
            $(this).attr('src','images/AfterClickMute.png'); /* change source */
        }
        else{
            $(this).attr('src','images/BeforeClickMute.png'); /* change source */
        }
    });
});

Though, if you just copy this code I would bet that you'll have some unexpected results throughout your document. See how you could limit this event to just the elements you wish to target.

wanovak
  • 6,117
  • 25
  • 32
  • hmm for some reason it isn't working, is it better to make the images links as well? put them in anchor tags? also should i have both images in the same div? right now they are currently placed one behind the other. – user1584988 Aug 09 '12 at 22:44
  • No, you don't need to do that. Are you including jQuery? – wanovak Aug 09 '12 at 22:50
  • You need to include jQuery in order to use jQuery syntax. – wanovak Aug 09 '12 at 22:52
0
<a href="index.html">
<img src="images/play.png" onmouseover="this.src='images/playdiffcolor.png'" onclick="this.src='images/pause.png'" onmouseout="this.src='images/pause.png'" border="0" />
</a>

This is how I did it - it works wonders.

I hope that helps. I'm just trying to learn how to play/pause/stop audio files now...

Simon MᶜKenzie
  • 8,344
  • 13
  • 50
  • 77
NICK
  • 53
  • 9