The layer while rolling over the link.
/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke
ISBN: 067231763X
Publisher Sams CopyRight 2000
*/
<html>
<head>
<title>JavaScript Unleashed</title>
<style type="text/css">
<!--
#layer1{
background-color: red;
height: 100;
left: 10;
position: absolute;
top: 50;
width: 100;
visibility: hidden;
}
-->
</style>
<script type="text/javascript" language="JavaScript1.2">
<!--
// Create global variables for browser type
var isIE = new Boolean(false);
var isNav = new Boolean(false);
var unSupported = new Boolean(false);
var layer = new String();
var style = new String();
// Determine if the browser is Internet Explorer, Navigator,
// or other. Also, set the layer variable depending on the
// type of access it needs.
function checkBrowser(){
if(navigator.userAgent.indexOf("MSIE") != -1){
isIE = true;
layer = ".all";
style = ".style";
}else if(navigator.userAgent.indexOf("Nav") != -1){
isNav = true;
layer = ".layers";
style = "";
}else{
unSupported = true;
}
}
// Take the state passed in, and change it.
function changeState(layerRef, state){
eval("document" + layer + "['" + layerRef + "']" + style + ".visibility = '" + state + "'");
}
//-->
</script>
</head>
<body onload="checkBrowser()">
<div name="layer1" id="layer1">
Hello World!
</div>
<a href="javascript:void(0)"
onmouseout="changeState('layer1','hidden')"
onmouseover="changeState('layer1','visible')">
Rollover to show and hide the layer.
</a>
</body>
</html>
Related examples in the same category