Share on Google+Share on Google+

JavaScript hide image

This page discusses - JavaScript hide image

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:

<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'; 

<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>

Output will be displayed as:

On clicking the Show button, the image will get visible:

Download Source Code:



Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Discuss: JavaScript hide image  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
june lee
August 19, 2011

sorry~~can u help me??i wan to ask this question? Create a html page with a form and 2 buttons. The page must have a background image. On clicking the first button, it will run a JavaScript function in the <head> tag. The JavaScript function will make the background disappear. Clicking the second button will run the same JavaScript and make the background image appear again. Show the codes of the html file here as the answer to this question.