CODEWITHSUNDEEP
javascripthtml
Mego
Mego

Reputation: 164

Switching between two images

I have this simple code 

<a title="disable music" id="mute_link" name="mute_link"
    style="position:absolute;right:15px;top:15px;cursor:pointer;">
  <img src="images/icons/stopmusic.png"
       alt="stop playing music"
       name="music"
       onclick="document.images['music'].src='images/icons/stopmusicdis.png'">
</a>

And I have a problem with this. I need image will change after each click, it means I open site and i have there image stopmusic.png. After click on it I need to appear stopmusicdis.png. After second click on image I need back the stopmusic.png. It´s possible to do it?

Upvotes: 0

Views: 95

Answers (5)

Techy
Techy

Reputation: 2654

I will tell you the idea.Use jquery or javascript

  • Add click event for each image.
  • inside click event for first image,change the image to second image
  • Inside click event for second image,change the image to first image

Hope you understand this

example: html:

 <div id="img"><img src="image1.jpg" alt="image1"></div>

jquery

$("#img").click(function(){
  if($("img").attr('src')=="image1.jpg"){
    $("img").attr('src','image2.jpg');
  }
  else
  {
    $("img").attr('src','image1.jpg'); 
  }     
});

this is just an example.

Upvotes: 0

DavidN.
DavidN.

Reputation: 125

create a JavaScript function and call it from the onclick event

<img src="images/icons/stopmusic.png" alt="stop playing music" name="music" onclick="change_img()"

Here is the function you could use :

<script>
    function change_img(){
        if (document.getElementById("img").getAttribute("name") == "img1"){
            document.getElementById("img").src = "new url"
            document.getElementById("img").setAttribute("name", "img2")
        }else {
            document.getElementById("img").src = "old url"
            document.getElementById("img").setAttribute("name", "img1")
        }
    }
</script>

It changes to the other image and back

Upvotes: 0

Nicolas Henrard
Nicolas Henrard

Reputation: 843

Here is a gerenal solution. You just have to change data-imgon and data-imgoff.

JsFiddle: http://jsfiddle.net/7Z4E5/

HTML: 

<a title="disable music" id="mute_link" name="mute_link">
     <img src="http://placehold.it/350x150" data-imgon="http://placehold.it/350x150" data-imgoff="http://placehold.it/150x350" alt="stop playing music" name="music" id="music"/>
</a>

CSS: 

#mute_link{position:absolute;right:15px;top:15px;cursor:pointer;}

JavaScript:

$(function () {
    // Handler for .ready() called.
    $("#mute_link").on("click", function () {

        if ($("#music").data("imgon") === $("#music").attr("src")) {
            //Change to OFF
            $("#music").attr("src", $("#music").data("imgoff"));
        } else {
            //Change to on
            $("#music").attr("src", $("#music").data("imgon"));
        }
    });
});

Upvotes: 1

r---------k
r---------k

Reputation: 977

Here's a fiddle with some javascript http://jsfiddle.net/gc9sW/

Find your <img> tag through element.getElementById("id"), then check its src attribute, and swap it around o/

Upvotes: 0

openorclose
openorclose

Reputation: 175

Put this code in your javascript:

document.getElementById("mute_link").addEventListener("click", function() {
    var e = document.getElementsByName("music")[0];
    e.src = e.src.indexOf("stopmusic.png") == -1 ? 
            "images/icons/stopmusic.png":"images/icons/stopmusicdis.png"
});

Upvotes: 0

Related Questions