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('<ILAYER>');
document.write('<LAYER id="zebra" visibility="hide"
z-index="10" onMouseOver="showLayer(zebra)"
onMouseOut="hideLayer(zebra)">');
document.write('<IMG src="largezebra.jpg" border="0">');
document.write('</LAYER>');
document.write('<LAYER visibility="show" z-index="5"
onMouseOver="showLayer(zebra)" onMouseOut="hideLayer(zebra)">');
document.write('<IMG src="zebrathumb.jpg" border="0"
width="60" height="84">');
document.write('</LAYER>');
document.write('</ILAYER>');
}
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="largezebra.jpg" border="0">');
document.write('</DIV>');
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>
