Forum Moderators: open
I want to enable and disable images on a web page . When the user wants to view all the images using a button, they all should show up and if he clicks the same button again, they should disappear from the web page. All the images are already stored in an array in a different function.
I am new to javascript and I don't know whether its possible.
Any help is greatly appreciated.
thanks
You can do it with style="visibility:'hidden'" within the img tag or surrounding div element, this sets it off at first. Then an onclick event in your button with the following javascript getElementById("yourDivIdorImgId").style.visibility = 'visible' to show your images.
HTH,
-george
An alternative approach is to use the style attribute 'display'. Both 'visibility' and 'display' can show/hide page elements. 'Visibility' will show a blank space with the same dimensions as the element when set to visibility:hidden. 'Display', on the other hand, will not leave a blank space at all.
Using display, you would have:
<head>
<script type="text/javascript">
<!--
function showHide(){
//create an object reference to the div containing images
var oImageDiv=document.getElementById('myimageDiv')
//set display to inline if currently none, otherwise to none
oImageDiv.style.display=(oImageDiv.style.display=='none')?'inline':'none'
}
//-->
</script>
</head>
<body>
<!--myimageDiv initially set to display:none //-->
<div id="myimageDiv" style="display:none">
<img id="myimage1" src="\images\logo.gif" alt="" />
<img id="myimage2" src="\images\logo.gif" alt="" />
</div>
<br />
<!--This button calls the showHide function //-->
<button onclick="showHide()" >clickme</button>
</body>
Hope this helps,
ajkimoto
thanks again
