CODEWITHSUNDEEP
javascripthtml
crazyTechie
crazyTechie

Reputation: 2557

show/hide image on click

I need to show/hide image in html page. I thought its very simple. But why I am getting error 'visible' undefined.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Ajax Test
    </title>
    <script type="text/javascript">
<!--
    function showImage(){
        document.getElementById('loadingImage').style.visibility=visible;
    }

    -->

    </script>
    </head>
<body>
    <input type="button" value="Ajax Button" onclick="showImage();"/>
    <img id="loadingImage" src="ajax-loader.gif" style="visibility:hidden"/>

</body>

Upvotes: 12

Views: 99923

Answers (6)

Guest
Guest

Reputation: 11

None of this worked for me. All you have to do is set the image classname to a css property with opacity.

JavaScript:

document.getElementById('loadingImage').className = "opacityofimage";

CSS:

.opacityofimage {
    opacity:0;
}

Upvotes: 0

crazyTechie
crazyTechie

Reputation: 2557

I am very very sorry. It should be

  document.getElementById('loadingImage').style.visibility='visible';

quuotes missing aroung visible.

Upvotes: 1

Rich Adams
Rich Adams

Reputation: 26584

You need to enclose it in quote marks, otherwise JavaScript thinks you're trying to set it to be the value of a variable called "visible". Since you don't have a variable called "visible", you get the error saying that it's undefined.

document.getElementById('loadingImage').style.visibility='visible';

Upvotes: 0

Phil.Wheeler
Phil.Wheeler

Reputation: 16858

If the other answers don't give you the results you're after, try setting the display to none:

document.getElementById('loadingImage').style.display='none';

Upvotes: 3

TIMEX
TIMEX

Reputation: 272372

I would use Jquery. Go download it at the Jquery home page.

Then, include it:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showImage(){
$("#loadingImage").toggle();
}

</script>


<img id="loadingImage" src="ajax-loader.gif" style="display:none;"/>

Upvotes: 3

David M
David M

Reputation: 72930

You need to put it in quotes - it's a string:

document.getElementById('loadingImage').style.visibility='visible';

Upvotes: 16

Related Questions