Forum Moderators: open
I'm nearly there, the div appears, but then rather than just that div disappearing when you click again, everything disappears! I'm sure its simple to work out for people who are confident using Javascript. Not for me though!
Here's the code
<html lang="en">
<head>
<title>Test Page</TITLE>
<style type="text/css">
div.image1 {
position: absolute;
width: 398px;
height: 474px;
top: 88px;
left: 18px;
z-index: 1;
}
div.semitransparent {
position: absolute;
width: 398px;
height: 474px;
top: 88px;
left: 18px;
background-image:url(images/contentfill.gif);
display: none;
z-index: 2;
}
a img { border: none ; }
</style>
<script type="text/javascript">
function hideDivs(){
var arr = document.getElementsByTagName('div')
for(var i=0; i<arr.length;i++){
arr[i].style.display = (arr[i].style.display == 'block')? 'none':'block';
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div><a href="#" onClick="hideDivs();return false;"><img src="images/logo/caricon.gif"></a></div>
<div class="image1"><img src="images/juno/juno1.jpg"></div>
<div class="semitransparent" id="hide1"></div>
</body>
</html>
Hope you can help
Thanks
arr[i].style.display
There is no "display" value set for any of the 3 divs (the value is an empty string).
Since [empty string] does not equal "block", all three divs have their style objects' display property set to "block" on the first click. On the second they all get set to "none".
IE has the non-standard, currentStyle property, and there are more advanced ways for dealing with this in standards browsers. For now, I'd just set the display values inline.
<html lang="en">
<head>
<title>Test Page</TITLE>
<style type="text/css">
div.image1 {
position: absolute;
width: 398px;
height: 474px;
top: 88px;
left: 18px;
z-index: 1;
display:block;
}
div.semitransparent {
position: absolute;
width: 398px;
height: 474px;
top: 88px;
left: 18px;
background-image:url(images/contentfill.gif);
display: none;
z-index: 2;
}
a img { border: none ; }
</style>
<script type="text/javascript">
function hideDivs(){
var arr = document.getElementsByTagName('div')
for(var i=0; i<arr.length;i++){
arr[i].style.display = (arr[i].style.display == 'block')? 'none':'block';
}
}
function hideDiv(divId){
var arr = document.getElementById(divId)
if ( arr!= null ) {
arr.style.display = (arr.style.display == 'none')? 'block':'none';
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div><a href="#" onClick="hideDiv('imgToHide');return false;"><img src="images/logo/caricon.gif"></a></div>
<div id="imgToHide" class="image1"><img src="images/juno/juno1.jpg"></div>
<div class="semitransparent" id="hide1"></div>
</body>
</html>
Of course the hideDiv function can be modified to close a group of id'd div tags. I've also added display:block; to your image1 css and reversed the style check for block to none. Seems to work fine in IE 6.
Hope it helps,
Dom
