Creating
a Layer
Home > Build
> Programming > JavaScript
by
Murray Johnson Ever been low on real-estate on your Web page and had to make
the images a little smaller than you wanted so they'd fit? Well this script will
help you out. It allows you to zoom in on a thumbnail sized picture without changing
pages but with a simple mouse over. First of all, to combat the differences
in Netscape and Internet Explorer you need a script that will determine which
one the client is using. Cut and paste this code into the HEAD of your page: <SCRIPT
language="JavaScript">
<!--
var IE = false;
var NS=false;
var browser_version = parseInt(navigator.appVersion);
var browser_type = navigator.appName;if
(browser_type == "Microsoft Internet Explorer" && (browser_version
>= 4)) { IE = true; } else if (browser_type == "Netscape" &&
(browser_version >= 4) && (browser_version < 5)) { NS = true; }else
if (browser_type == "Netscape" && (browser_version >= 5))
{ NS = false; }// -->
</SCRIPT> Next we write the JavaScript
function to create the layer based on the client's browser: <SCRIPT
language="JavaScript">
<!--
function createLayer() { if
(NS) {
document.write('<LAYER id="zebra"
visibility="hide" z-index="10" onMouseOver="showLayer(zebra)"
onMouseOut="hideLayer(zebra)">');
document.write('<LAYER
visibility="show" z-index="5" onMouseOver="showLayer(zebra)"
onMouseOut="hideLayer(zebra)">');
}
if (IE) {
document.write('<DIV
id="zebra" style="position: absolute; visibility: hidden; z-index:
10" onMouseOver="showLayer(zebra)" onMouseOut="hideLayer(zebra)">');
document.write('<IMG src="zebrathumb.jpg"
border="0" onMouseOver="showLayer(zebra)" width="60"
height="84">');
}
}
// -->
</SCRIPT>
Next we write the JavaScript to show and hide the layer based on the client's
browser: <SCRIPT language="JavaScript">
<!--
var name = new Image();function showLayer(name) {
if (IE) { name.style.visibility
= "visible"; }
if (NS) { name.visibility = "show"; }
}
function hideLayer(name) {
if (IE) { name.style.visibility = "hidden";
}
if (NS) { name.visibility = "hide"; }
}
// -->
</SCRIPT>Finally, cut and paste this code in your page where you
want it: <SCRIPT language="JavaScript">
<!--
createLayer()
// -->
</SCRIPT> | 
