Dynamic HTML Example : Dynamic Overlay Format

The Dynamic Overlay website has, as its basic component, a DIV that has been formatted using Cascading Style Sheet (CSS) features. It could look thus:

<DIV ID=myDiv STYLE="position:absolute;top:10px;left:20px;
visibility:hidden">
Text and or Image(s)
</DIV>

The DIV functions as a 'container'. It can be initially formatted with standard CSS features. The developer, using JavaScript, can access and modify those features to create a user-responive website.

All CSS features and JavaScript functions used are cross-browser compliant, working equally well in Internet Explorer and Netscape, versions 4.0+, including 5.0 beta thru 5.0+.

A 'Dynamic Overlay' therefore is defined as: A cross-browser styled DIV dynamically controlled by JavaScript.

Below is a html file layout which presents the basic Dynamic Overlay concept:

<html>
<head>
<title> My Title </title>
</head>
<body>
<a href=javascript:showDiv()>Show DIV </a>
<DIV ID="myDiv"
STYLE="position:absolute;top:800px;left:20px;visibility:hidden;">
Meet the Cast:<br>
<img src=crunch.gif><img src=claude.gif><img src=gobbles.gif>
<img src=spinner.gif><img src=lucky.gif>
</DIV>
<SCRIPT LANGUAGE="JavaScript">
<!-- //
myBrowser=navigator.appName
myVersion=navigator.appVersion
var version45=(myVersion.indexOf("4.")!=-1
||myVersion.indexOf("5.")!=-1)
var NS=(myBrowser.indexOf("Netscape")!=-1 && version45)
var IE=(myBrowser.indexOf("Explorer")!=-1 && version45)
if(IE){var hide="hidden"; var show="visible"}
if(NS){var hide="hide"; var show="show"}

function showDiv()
{
if(IE)document.all.myDiv.style.visibility=show
if(NS)document.myDiv.visibility=show
}
// -->
</SCRIPT>

</body>
</html>

Show DIV