1

I am Building a Javascript app

Now I want to have a image button that I have given already now I want to change the image to another image on clicking current image.

When i click again I want to get back the old image please any one help me by giving a coding example pls..

SARAVANA KUMAR
  • 474
  • 2
  • 6
  • 15
  • If you want an element, say a DIV, to function as a button and change the image temporarily when the mouse button is held down in clicking, see this article: http://stackoverflow.com/questions/19584516/changing-the-background-image-on-mouse-down/21817668#21817668 – cssyphus Feb 16 '14 at 22:37

2 Answers2

10

Try this:

function diffImage(img) 
{
   if(img.src.match(/blank/)) img.src = "black.jpg";
   else img.src = "blank.jpg";
}

HTML

<img src="black.jpg" id="image1" onclick=diffImage(this) />

Just try to change image path as per your requirements or you can add multiple images.

DEMO.

Hope this work.

Pirates
  • 190
  • 1
  • 10
  • Thanks for your Help .. I got it worked.. Very Thanks..Sorry for not Vote up you.. Because I didn't habe reputation to vote up – SARAVANA KUMAR Aug 02 '13 at 05:58
1

You could also do it with only using CSS if you wanted to.

Just make a checkbox so you can click it without having to trigger an event and put the image in there and then have a different image for when it has been clicked.

<input type="checkbox"/>

And your CSS:

input[type="checkbox"] {
    content: url(image url here);
}
input[type="checkbox"]:checked {
    content: url(different image here);
}

I don't remember where I learned this trick, but it's worked for me in the past.

tannerwj
  • 154
  • 3
  • 11