i try to build a layer that expands nicely (copy/paste code below)
for some reasone the browser triggers onmouseover when you go over the icon which is on the top. right next to the first entry. why is that????? why does it look at it as a ONMOUSEOUT?
I'd appreciate any help
<html>
<head>
<title>Neue Seite 1</title>
<style type="text/css">
body {font-family: Verdana; font-size: 8pt; text-transform : lowercase;}
div {font-family: Verdana; font-size: 8pt; color: gray; cursor: pointer;}
</style>
<script language="JavaScript">
//global variable: lock
lock = false;
fakeLock = false;
function expandDropDownBox(currentHeight)
{
var divStart = 14;
var divHeight = 70;
var nInk = currentHeight + 1;
if(lock == true && currentHeight == divStart)
{
// do nothing because already running
//alert("sorry, it's locked"
;
}
else
{
var objDiv = document.getElementById('dropDownBox');
objDiv.style.clip = "rect(0 202 "+ nInk +" 0)"
if(nInk<divHeight)
{
lock = true;
//alert("repeat"
window.setTimeout('expandDropDownBox('+nInk+')', 10);
}
else
{
// undo function lock when inkremented value equals the max height
lock = false;
//alert("unlocked!"
}
}
}
function collapseDropDownBox(divStart)
{
//fakeLock = true;
var objDiv = document.getElementById('dropDownBox');
objDiv.style.clip = "rect(0 202 "+ divStart +" 0)"
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<div id="BaseDiv" style="position: relative;">
<div id="dropDownBox" style="position: absolute; border: 1px solid navy; background-color: efefef; clip: rect(0 202 14 0)" onmouseover="expandDropDownBox(14)" onmouseout="collapseDropDownBox(14);">
bern<img src="down.gif" width="19" height="7" alt="" border="0"><br>
luzern<br>
genf<br>
aarau<br>
chur<br>
<table cellpadding="0" cellspacing="0" width="200px">
<tr><td></td></tr>
</table>
</div>
</div>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
for some reasone the browser triggers onmouseover when you go over the icon which is on the top. right next to the first entry. why is that????? why does it look at it as a ONMOUSEOUT?
I'd appreciate any help
<html>
<head>
<title>Neue Seite 1</title>
<style type="text/css">
body {font-family: Verdana; font-size: 8pt; text-transform : lowercase;}
div {font-family: Verdana; font-size: 8pt; color: gray; cursor: pointer;}
</style>
<script language="JavaScript">
//global variable: lock
lock = false;
fakeLock = false;
function expandDropDownBox(currentHeight)
{
var divStart = 14;
var divHeight = 70;
var nInk = currentHeight + 1;
if(lock == true && currentHeight == divStart)
{
// do nothing because already running
//alert("sorry, it's locked"
;}
else
{
var objDiv = document.getElementById('dropDownBox');
objDiv.style.clip = "rect(0 202 "+ nInk +" 0)"
if(nInk<divHeight)
{
lock = true;
//alert("repeat"
;window.setTimeout('expandDropDownBox('+nInk+')', 10);
}
else
{
// undo function lock when inkremented value equals the max height
lock = false;
//alert("unlocked!"
; }
}
}
function collapseDropDownBox(divStart)
{
//fakeLock = true;
var objDiv = document.getElementById('dropDownBox');
objDiv.style.clip = "rect(0 202 "+ divStart +" 0)"
}
</script>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<div id="BaseDiv" style="position: relative;">
<div id="dropDownBox" style="position: absolute; border: 1px solid navy; background-color: efefef; clip: rect(0 202 14 0)" onmouseover="expandDropDownBox(14)" onmouseout="collapseDropDownBox(14);">
bern<img src="down.gif" width="19" height="7" alt="" border="0"><br>
luzern<br>
genf<br>
aarau<br>
chur<br>
<table cellpadding="0" cellspacing="0" width="200px">
<tr><td></td></tr>
</table>
</div>
</div>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>