Onclick image dissapear.

Hi, I need to make a picture dissapear onlick using java script. I will be honest I am lost because I'm new to java and I can't find a tutorial for this! I have been experimenting with other onclick uses (alerts etc) but this one is bugging me!

Thanks,

Pope

 

Add this to your image tag:

onclick="this.style.display='none'; return false;"

Code (markup):

And if you want to have a nice pointer on the image as well, like if it was a link, then you can add this also:

style="cursor: pointer;"

Code (markup):

So your whole image tag would look something like this:

<img src="your-domain.com/your-photo-url.jpg" onclick="this.style.display='none'; return false;" style="cursor: pointer;" border="0" alt="" />

Code (markup):

 

Thanks alot! I had worked it out but only so that the picture left behind the little icon that shows it had failed to load!

 

if you really want to remove the image by removing the img tag itseld onclick.. you can do this..

 <img src="image.png" onclick="this.parentNode.removeChild(this);" /> 

HTML:

 

or you could just replace the image with a 1x1 clear gif if you need to use the img tag again

 

Or you could put the img into a div:

<div id="image"><img src="your-domain.com/your-photo-url.jpg" onclick="hideThis();" /></div>

Code (markup):

and run Javascript (not Java - that's an entirely different language) to hide the div itself (in the function hideThis()).