Highlighting element at mouse position - doesn't work in Firefox

jpk872

i created some javascript DHTML that highlights which menu selection the mouse is currently at, but it won't work on Firefox. Any idea? The source is old, so probably things have changed.

Expand|Select|Wrap|Line Numbers

 
<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 = "darkblue";

            srcElement.style.backgroundColor = "E9ECF5";

      }

}
 
function document_onmouseout()

{

      var srcElement = event.srcElement;
 
      if (srcElement.tagName == "TD" && typeof(srcElement.RollOut) != "undefined")

      {

            srcElement.style.color = "E9ECF5";

            srcElement.style.backgroundColor = "#AA0202";

      }

}
 
function goPage(src)

{

      window.location.href = src;

}
 
document.onmouseover = document_onmouseover;

document.onmouseout = document_onmouseout;
 
</script>
 
<style>

      .DivMenu {position.absolute;

            left:0;

            top:0;

            width:500;

            background-color:#AA0202;

                        }

      .tdMenu {

            color:#E9ECF5;

            font-family:verdana;

            font-size:100%;

            cursor:default;

            text-align:center;

            }
 
</style>

</head>
 
<body>
 
<div id="MenuDiv" class="DivMenu" width="500" height="40" border="1" onmouseout="return hideMenu(this)">

<table border=0 cellspacing=1 cellpadding=1 id="WoodTable">

      <tr>

            <td id="Home" width="100" RollOver RollOut

            onclick="goPage('home.htm')"  class="tdMenu">Home

            </td>
 
            <td id="Resume" width="100" RollOver RollOut

            onclick="goPage('resume.htm')" class="tdMenu">Resume

            </td>
 
            <td id="Courses" width="100" RollOver RollOut

            onclick="goPage('courses.htm')"  class="tdMenu">Courses

            </td>
 
            <td id="Cool Sites" width="100" RollOver RollOut

            onclick="goPage('coolsites.htm')"  class="tdMenu">Cool Sites

            </td>
 
            <td id="Blog" width="100" RollOver RollOut

            onclick="goPage('blog.htm')"  class="tdMenu">Blog

            </td></tr>
 
</table>

</div>

shoonya

IE nd firefox/mozilla treats events diffrentlt
in IE event is a global object so you dont need to pass the event to event handler/function where as in mozilla you have to pass the event to the function

[HTML]document.onmousedown=dragHandler;

function dragHandler(e){
if (e == null) { e = window.event }
var target = e.target != null ? e.target : e.srcElement;
//alert(target.id)
....
...
}[/HTML]

similarly e.target nd e.srcElement works

acoder

Changed thread title.

Highlighting element at mouse position - doesn't work in Firefox

re: Highlighting element at mouse position - doesn't work in Firefox

re: Highlighting element at mouse position - doesn't work in Firefox

/bytes/development

/bytes/it

/bytes/about