Menu
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>
678
Projects In JavaScript & JQuery To show and hide div on mouse click using jQuery, use the toggle() method. On mouse click, the div is visible and on again clicking the div, it hides.
Style display property is used to hide and show the content of HTML DOM by accessing the DOM element using JavaScript/jQuery. To hide an element, set the style display property to “none”.
We have used a click() method which will be called when the button of id(hide) will be clicked and another click() method will be called when another button of id(show) will be click.
You need to put it in quotes - it's a string:
document.getElementById('loadingImage').style.visibility='visible';
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;"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
