ConfusedOfLife
08-26-2002, 10:08 PM
Hi, I'm trying to make a text that when the mouse goes over that, some other texts ( seperate lines ) go beneath the main line, like a kinda simple menu. Then user can click on the second texts ( texts that appeared after the mouse went on the first text ) and by clicking on each of them, for example we have an alert. The problem is that I'm using 2 nested spans, but when the mouse leaves the first or the children span's items, the children items do not disappear. I put the code below, I hope someone can help:
//---------------------------------------------
<html>
<head>
<title>Untitled</title>
<script>
function doit(what)
{
if ( what == "open" )
document.getElementById("Sec").innerHTML =
"<span style='color : \"red\";' onclick='alert(\"hello\");'>yes</span>";
else
document.getElementById("Sec").innerHTML =
" ";
}
</script>
</head>
<body>
<span style="position : relative; cursor : 'hand'; width : 100px" onmouseover="doit('open');" >
First Item
<span id="Sec" onmouseout="doit('close');">
</span>
</span>
</body>
</html>
//---------------------------------------------
<html>
<head>
<title>Untitled</title>
<script>
function doit(what)
{
if ( what == "open" )
document.getElementById("Sec").innerHTML =
"<span style='color : \"red\";' onclick='alert(\"hello\");'>yes</span>";
else
document.getElementById("Sec").innerHTML =
" ";
}
</script>
</head>
<body>
<span style="position : relative; cursor : 'hand'; width : 100px" onmouseover="doit('open');" >
First Item
<span id="Sec" onmouseout="doit('close');">
</span>
</span>
</body>
</html>