PDA

View Full Version : Need a hand with some rollover code



mh18aggie
07-25-2008, 02:52 PM
I apologize for the dumb question, but I'm trying to create a nav menu that always displays the div that has been most recently moused over. For some reason this code works when you mouse over the links from left to right, but not right to left. If anyone could take a quick look at this and give me some input I would greatly appreciate it.
Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script language="Javascript">
<!--
function toggleDiv(id,flagit) {
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"

}
else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"

}
}
//-->
</script>
<style type="text/css">

#div1 {
position: absolute;
top: 100;
left: 200;
width: 700px;
height: 400px;
visibility: hidden;
background-color: black;

}


#div2 {
position: absolute;
top: 100;
left: 200;
width: 700px;
height: 400px;
visibility: hidden;
background-color: red;

}


#div3 {
position: absolute;
top: 100;
left: 200;
width: 700px;
height: 400px;
visibility: hidden;
background-color: blue;

}


</style>


</head>
<body>

<a href="#" onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',1)"><img src="tab.gif" border="none" alt=""></a>
<a href="#" onMouseOver="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',1)"><img src="tab.gif" border="none" alt=""></a>
<a href="#" onMouseOver="toggleDiv('div3',1)" onMouseOut="toggleDiv('div3',1)"><img src="tab.gif" border="none" alt=""></a>


<div id="div1">Link 1 text! I've restrained the div size to 200px wide in the style declaration. Modify this to suit yourself.</div>
<div id="div2">Link 2 text! You can add all the usual style options, and position it to suit yourself!</div>
<div id="div3">Link 3 text! Use it to explain terms or further describe your linked pages, whatever!</div>










</body>
</html>