Mouseover Shows Hidden Image

[Total: 0    Average: 0/5]

This shows how to have IE or NS4 change the visibility property for images.

Body Code:

<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> 


<SCRIPT language="JavaScript">
<!--
function createLayer() { if (NS) {
document.write('<ILAYER>');
document.write('<LAYER id="cal" visibility="hide" z-index="10" onMouseOver="showLayer(cal)" onMouseOut="hideLayer(cal)">');
document.write('<IMG src="http://www.js-examples.com/js/pic1.gif" border="0">');
document.write('</LAYER>');
document.write('<LAYER visibility="show" z-index="5" onMouseOver="showLayer(cal)" onMouseOut="hideLayer(cal)">');
document.write('<IMG src="http://www.js-examples.com/js/pic3.gif" border="0" width="50" height="50">');
document.write('</LAYER>');
document.write('</ILAYER>');
}
if (IE) {
document.write('Move cursor over the picture<br><DIV id="cal" style="position: absolute; visibility: hidden; z-index: 10" onMouseOver="showLayer(cal)" onMouseOut="hideLayer(cal)">');
document.write('<IMG src="http://www.js-examples.com/js/pic1.gif" border="0">');
document.write('</DIV>');
document.write('<IMG src="http://www.js-examples.com/js/pic3.gif" border="0" onMouseOver="showLayer(cal)" width="50" height="50">');
}
}
// -->
</SCRIPT> 


<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> 


<SCRIPT language="JavaScript">
<!--

createLayer();
// -->
</SCRIPT>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *