Scripting Overlays

Overlays done with CSS generally look pretty silly, if not confusing, in browsers that don't support CSS, so it's a good idea to use a script to write the foreground element if the browser will support it. Here's a JavaScript that will do the job for Netscape 4.0 and IE 4.0:

	<script language="JavaScript">
	//this script writes the foreground layer of an overlay,
	//provided the user has Netscape 4.0+ or IE 4.0+
	<!--
	var browser=navigator.appName;
	var version=navigator.appVersion
	var ver1=version.substring(0,1)

	if (((browser == "Netscape") && (ver1 >= 4)) | 
	((browser == "Microsoft Internet Explorer") && (ver1 >= 4))) {
	document.write("<span class=shadow3 id=layer3>Overlay text here</span>")
	}
	//-->
	</script>
	

Since overlays in IE 3.0 are best done in two separate elements (while in Netscape and IE 4.0, the foreground element should be in a <span> within the background element), you'll need a separate script to write the foreground for IE 3.0; here's one that will do it:

	<script language="JavaScript">
	//this script writes the foreground layer of an overlay for IE 3.0x
	<!--
	 var browser=navigator.appName;
	 var version=navigator.appVersion
	 var ver2=version.lastIndexOf("MSIE")
	 var ver3=version.substring(ver2+5,ver2+6)
	 
	 if ((browser == "Microsoft Internet Explorer") && (ver3 == 3)){
	  document.write('<p class=shadow3>Overlay text here</p>')
	 }
	// -->
	</script>
	

Here, then, is the complete code for the overlay example from a few pages back, shown again below:

0

	<p class=hugeding>0 <br>
	<script language="JavaScript">
	<!--
	var browser=navigator.appName;
	var version=navigator.appVersion
	var ver1=version.substring(0,1)

	if (((browser == "Netscape") && (ver1 >= 4)) |
	((browser == "Microsoft Internet Explorer") && (ver1 >= 4))) {
	document.write("<span class=shadow3 id=layer3>Files</span>")
	}
	//-->
	</script> 
	</p>
	<script language="JavaScript">
	<!--
	 var browser=navigator.appName;
	 var version=navigator.appVersion
	 var ver2=version.lastIndexOf("MSIE")
	 var ver3=version.substring(ver2+5,ver2+6)
	 
	 if ((browser == "Microsoft Internet Explorer") && (ver3 == 3)){
	  document.write('<p class=shadow3>Files</p>')
	 }
	// -->
	</script>