I have tried the dynamic menu for ie and it works fine with the image
popout but when i try adn replace the image with a table i cant get the
alignment correct, the srcElement.width does seem to detect the table cell
width but does not align the popup option accordingly, help simple code
shown below
<html>
<head>
<style>
.DivMenu {
position:absolute;
left:-200px;
right:-1000px;
width:180px;
z-index:100;
background-color: darkorange;
border: 4px groove lightgrey;
}
.TDTop {
position:absolute;
left:200px;
right:100px;
width:100px;
}
.TDMenu {
color:darkblue;
font-family:verdana;
font-size:70%;
width:100%;
cursor:default;
}
</style>
<script language="JavaScript">
function showMenu(menuToShow)
{
var srcElement = event.srcElement;
var xPos = parseInt(srcElement.offsetLeft);
var yPos = parseInt(srcElement.offsetTop);
menuToShow.style.left = xPos + (srcElement.width)
menuToShow.style.top = yPos;
}
function hideMenu(menuToHide)
{
if (event.toElement != menuToHide &&
menuToHide.contains(event.toElement) == false)
{
menuToHide.style.left = -200;
menuToHide.style.top = -1000;
}
}
function document_onmouseover()
{
var srcElement = event.srcElement;
if (srcElement.tagName == "TD" &&
typeof (srcElement.RollOver) != "undefined")
{
srcElement.style.color = "white";
srcElement.style.backgroundColor = "darkblue";
}
}
function document_onmouseout()
{
var srcElement = event.srcElement;
if (srcElement.tagName == "TD" && typeof (srcElement.RollOut) !
= "undefined")
{
srcElement.style.color = "darkblue";
srcElement.style.backgroundColor = "darkorange";
}
}
function goPage(src)
{
window.location.href = src;
}
document.onmouseover = document_onmouseover;
document.onmouseout = document_onmouseout;
</script>
<title>goodpractice.net - Help</title>
<DIV ID="WoodMenuDiv" class="DivMenu" onmouseout="return hideMenu(this)">
<table ID="WoodTable">
<tr>
<td ID="WoodOak" RollOver RollOut onClick="goPage
('http:www.raith-rovers.co.uk')" class="TDMenu">
Oak Timber
</td>
</tr>
</table>
</div>
<table border="1">
<tr>
<td ID="Wood" onmouseover="return showMenu(WoodMenuDiv)"
onmouseout="return hideMenu(WoodMenuDiv)" class="TDTop">
Woodwork
</td>
</tr>
</table>
<!--<img
ID="WoodMenuImage"
src="../images/banner.gif"
width="180"
height="50"
style="position:absolute;left:10;top:75"
onmouseover="return showMenu(WoodMenuDiv)"
onmouseout="return hideMenu(WoodMenuDiv)"
>-->
</body>
</html>
View Cart
