JavaScript hide image
|
|
In this section, we are going to show and hide image on clicking the button using the JavaScript.
In the given example, we have defined an image using <img> tag inside the <div> tag. The method document.getElementById('div') grabs the id of the div element and refer to property 'visibility' with style object. The 'visibility' property makes the element visible or invisible. Now, if you apply the visibility property with the 'hidden' value to the image, the image will disappear and if you use the 'visible' value, the image will be visible again. When you load the page you will get two buttons. On clicking the button 'Show', the function showImage() is called and the image will be visible. But on clicking the button 'Hide', the function hideImage() is called that makes the image invisible.
Here is the code:
| <html> <h2>Show and Hide Image in JavaScript</h2> <script language=javascript type='text/javascript'> function hideImage() { if (document.getElementById) { document.getElementById('div').style.visibility = 'hidden'; } } function showImage() { if (document.getElementById) { document.getElementById('div').style.visibility = 'visible'; } } </script> <body onload="javascript:hideImage()"> <div id="div"><img SRC="images2.jpg" BORDER="0"> </div> <button onclick="javascript:hideImage()">Hide</button> <button onclick="javascript:showImage()">Show</button> </html> |
Output will be displayed as:
On clicking the Show button, the image will get visible:
