Thanks to Tsuji and especially Targol for putting me on the right track with the hidden div. However, I have one remaining problem with the hidden div: Whenever it is made visible or closed (i.e., made hidden again), the main window scrolls to the top. I've tried all the windows.scrollTo() and windows scrollBy() commands in various places, as you'll see below, but none of them return the window to the original vertical position before the div was made visible. Here is my code:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Product Specification</title>
<style type="text/css">
.supersize {background-color:#ffffff; layer-background-color:#ffffff;position:absolute;top:300px; left:150px; width:660px;
visibility:hidden;}
</style>
<script>
var PicNum= "Pic1";
var Winheight = "705";
function toggleBox(DivID, iState) // 1 visible, 0 hidden
{
if(document.layers) //NN4+
{
document.layers[DivID].visibility = iState ? "show" : "hide";
// window.scroll(0,1000); //doesn't work
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(DivID);
obj.style.visibility = iState ? "visible" : "hidden";
// alert("supersize is now visible. Window has not scrolled.")
window.scrollTo(0,300); //doesn't work
}
else if(document.all) // IE 4
{
document.all[DivID].style.visibility = iState ? "visible" : "hidden";
// window.scroll(0,300); //doesn't work
}
}
</script>
</head>
<body>
<div id="pic1" align="center" class="supersize" style="height:705px;">
<table border="0" style="border-collapse: collapse" width="100%" height="100%" bgcolor="#FFFFFF" id="table1">
<tr>
<td align="center" valign="center" width="100%" height="95%" >
<IMG width="100%" height="100%" border="0"
src="
</td>
</tr>
<tr>
<td align="center" border="0" width="100%" height ="5%" valign="top">
<a href="#" onclick="toggleBox(PicNum,0);window.focus;window.scrollTo(0,300);">Close</a>
</td>
</tr>
</table>
</div>
This is the anchor tag with the hyperlink that is clicked to trigger the display of the hidden div:
<a href="#"><img src="
border="0"
onclick="toggleBox(PicNum,1);window.focus;window.scrollTo(0,300);">
Notice I also added a windows.scrollTo() command to the onclick event of the above <a> tag but this doesn't work either.
I do notice that if I put an alert right after the statement in the togglebox function that makes the hidden div visible, the window has not scrolled yet. So whatever is causing it to scroll is happening after the function executes.
Again, my thanks in advance for any help that anyone can provide.