Solved

onmouseover/onmouseout of td elements

Posted on 2003-12-12
15
1,649 Views
Last Modified: 2013-11-19
I've got a table with some links in it.  Roughly speaking this is:

<table>
<tr><td><a href="...">Link 1</a></td></tr>
<tr><td><a href="...">Link 2</a></td></tr>
</table>

And I define onmouseover and onmouseout events for the table.  When the user mouseovers, it's all fine, but an onmouseout event is triggered if the mouse pointer moves off one of the link elements, even if it doesn't leave the whole table.  How do I avoid this?
0
Comment
Question by:mrh30
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
15 Comments
 
LVL 10

Expert Comment

by:D_M_D
ID: 9928510
put the onmouseover and onmouseout events in the <td> tags...

--------
D_M_D
0
 
LVL 5

Expert Comment

by:prohacx
ID: 9928520
Hi there,

I solved this by adding a div around the table and defining the mouseover and out on this div, like so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> over and out </TITLE>
</HEAD>

<BODY>

<div onmouseover="document.getElementById('divStatus').innerHTML = 'over';" onmouseout="document.getElementById('divStatus').innerHTML = 'out';">
<table border="1" cellspacing="0" cellpadding="0">
<tr><td><a href="#">a link</a></tr>
<tr><td><a href="#">another link</a></tr>
</table>
</div>

<div id="divStatus"></div>

</BODY>
</HTML>

Good luck!
0
 

Expert Comment

by:BakaMattSu
ID: 9928537
Or you could use onmouseenter and onmouseleave in place of the over and out.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 3

Author Comment

by:mrh30
ID: 9928605
I've actually already tried the divs idea.  The fuller version of what I'm dealing with is:

<div onmouseout="window.setTimeout('hideMenu()', 800);" onmouseover="javascript: window.clearTimeout(currentTimeout);" style="display: none; position: absolute; left: 100px; top: 226px;" id="Menu21">
<table cellpadding="0" cellspacing="0" style="background-color: blue; color: white; width: 100px">
<tr><td><a href="/cgi-bin/dynamic/Seniors/Success/371511103.html">Mel's Page</a></td></tr><tr><td><a href="/cgi-bin/dynamic/Seniors/Success/371811103.html">Recent Highlights</a></td></tr></table></div>

hideMenu() hides the menu by setting its display type.  The menu is first shown when you mouseover another div which this one partially overlaps (the idea obviously being that of a pop-up menu).

Expected behaviour is that the menu should pop up when you mouse over the first div and then stay open indefinitely once your mouse is over the menu.
0
 
LVL 3

Author Comment

by:mrh30
ID: 9928618
onmouseenter and onmouseleave don't comply with the DOM so can't be used.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9928661
mrh

what type of menu are you trying to do?

here is one i ran across it may be what you want

<html>

      <head>
            <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
            <title></title>
<script type="text/javascript">
<!--
var isDHTML = 0;
var isID = 0;
var isAll = 0;
var isLayers = 0;
      if (document.getElementById) {
            isID = 1; isDHTML = 1;
      }
      else {
            if (document.all) {
                  isAll = 1; isDHTML = 1;
            }
            else {
                  browserVersion = parseInt(navigator.appVersion);
                  if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {
                        isLayers = 1; isDHTML = 1;
                  }
            }
      }
function findDOM(objectID,withStyle) {
      if (withStyle == 1) {
            if (isID) {
                  return document.getElementById(objectID).style ;
            }
            else {
                  if (isAll) {
                        return document.all[objectID].style;
                  }
                  else {
                        if (isLayers) {
                              return document.layers[objectID];
                        }
                  }
            }
      }
      else {
            if (isID) {
                  return document.getElementById(objectID);
            }
            else {
                  if (isAll) {
                        return document.all[objectID];
                  }
                  else {
                        if (isLayers) {
                              return document.layers[objectID];
                        }
                  }
            }
      }
}
var menuTop = 45;
var menuLeft = 400;
var domSMenu = null;
var oldDomSMenu = null;
var t = 0;
var lDelay = 3;
var lCount = 0;
var pause = 250;

function popMenu(menuNum){
      if (isDHTML) {
///// Sets the previous menu's visibility to hidden
            t = 2;
            if (oldDomSMenu) {
                  oldDomSMenu.visibility = 'hidden';
                  oldDomSMenu.zIndex = '0';
                  t = 2;
                  lCount = 0;
            }

///// Defines the DOMs      of the menu objects
            var idMenu = 'menuHead';
            var domMenu = findDOM(idMenu,0);

            var idMenuOpt = 'menuHead' + menuNum;
            var domMenuOpt = findDOM(idMenuOpt,0);            

            var idSMenu = 'menu' + menuNum;
            var domSMenu = findDOM(idSMenu,1);
///// Defines the positions of the sub-menus
      if (isID || isAll) {       
            var menuLeft = (domMenu.offsetLeft) + (domMenuOpt.offsetLeft) + 5;
            var menuTop = (domMenu.offsetTop) + (domMenu.offsetHeight) + 5;
      }
      if (isLayers) {
            var menuLeft = document.layers[idMenu].layers[idMenuOpt].pageX - 5;
            var menuTop = domMenu.pageY + domMenu.clip.height - 5;
      }
///// Positions and shows the menu
      if (oldDomSMenu != domSMenu) {      
            domSMenu.left = menuLeft;
            domSMenu.top = menuTop;
            domSMenu.visibility = 'visible';
            domSMenu.zIndex = '100';
            oldDomSMenu = domSMenu;
      }
///// Resets oldDom if it is the same as the current DOM
      else {
            oldDomSMenu = null;
            }
      }
      else {
            return null;
      }
}

function delayHide() {
///// Checks to see if there is a menu showing and whether
///// the global variable 't' has been set to 0
    if ((oldDomSMenu) && (t == 0)) {
///// Hides the old menu, resets menu conditions,
///// and stops the function running
        oldDomSMenu.visibility = 'hidden';
        oldDomSMenu.zIndex = '0';
        oldDomSMenu = null;
        lCount = 0;
        return false;
    }

///// Interupts the function if another menu is opened
    if (t == 2) {
            lCount = 0;
            return false;
      }

///// Repeats the function adding 1 to lCount each time until
///// lCount is equal to lDelay and then sets 't' to 0 so that
///// the menu will hide when it runs again
    if (t == 1) {
        lCount = lCount + 1;
        if (lDelay <= lCount) {
                  t = 0;
            }
        if (lDelay >= lCount) {
                  setTimeout('delayHide(' + t + ')',pause);
            }
    }
}

var oWidth, oHeight;
if (document.layers) {
      oWidth = window.innerWidth; oHeight = window.innerHeight;
      window.onresize = function() {
      if (window.innerWidth != oWidth || window.innerHeight != oHeight)
            location.reload();
      }
}

// -->
</script>
<style type="text/css"><!--
body  {
      color: white;
      font-family: "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
      background-color: #333
      }
#content {
      margin-top: 35px;
}
            
.menuStyle  {
      color: #000000;
      font-size: 12px;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      background-color: #ccc;
      padding: 5px;
      width: 100%;
      border: solid 1px #000000;
      }


#menuHead   {
      background-color: #ccc;
      position: absolute;
      z-index: 50;
      top: 0px;
      left: 0px
      }

            
#menuHead1  {
            position: relative;
             }

#menu1 {
      position: absolute;
      z-index: 100;
      visibility: hidden;
      width: 150px;
      }

#menuHead2  {
            position: relative;
             }

#menu2 {
      position: absolute;
      z-index: 100;
      visibility: hidden;
      width: 150px;
      }
      
#menuHead3  {
            position: relative;
             }

#menu3 {
      position: absolute;
      z-index: 0;
      visibility: hidden;
      width: 150px;
      }
      
      a.menulink:link {
      font-weight: bold;
      text-decoration: none
      }

a.menulink:visited {
      font-weight: bold;
      text-decoration: none
      }

a:active {
      color: #666;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      text-decoration: underline
      }

a.menulink:hover {
      color: #900;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
      text-decoration: none;
      cursor: ne-resize;
      }


a:link {
      color: #f00;
      font-weight: bold;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif
      }

a:visited {
      color: #f00;
      font-weight: normal;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif
      }

a:hover {
      text-decoration: none;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      cursor: nw-resize;
      }
--></style>
            </head>
      <body>
      
      
      <div id="menuHead"class="menuStyle">
<b>
<a  id="menuHead1" class="menuLink" href="#" onMouseOut="t = 1; delayHide()" onMouseOver="popMenu(1)">Menu 1</a> |
<a  id="menuHead2" class="menuLink" href="#" onMouseOut="t = 1; delayHide()" onMouseOver="popMenu(2)">Menu 2</a> |
<a  id="menuHead3" class="menuLink" href="#" onMouseOut="t = 1; delayHide()" onMouseOver="popMenu(3)">Menu 3</a> |
</b>
</div>

<div id="menu1" class="menuStyle">
<b>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 1.1</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 1.2</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 1.3</a><br>
</b>
</div>
      
      <div id="menu2" class="menuStyle">
<b>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 2.1</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 2.2</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 2.3</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 2.4</a><br>
</b>
</div>

      <div id="menu3" class="menuStyle">
<b>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.1</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.2</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.3</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.4</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.5</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.6</a><br>
</b>
</div>
<div id="content">
      <p>Some Content Goes HERE</p>
</div>
</body>

</html>
0
 
LVL 3

Author Comment

by:mrh30
ID: 9928764
Ok, I've basically followed jaysolomon's approach, namely I've removed the tables.  So now we have:

<div>
<a>Link 1</a><br>
<a>Link 2</a><br>
</div>

With onmouseover/onmouseout stuff attached to the div tags and style information specifying the size of the div.

The onmouseout event is still triggered when moving off one of the links though!
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9928888
i have encountered this before, i cannot remember what i did or even if i did. i may have just quit fooling with it.

I will attempt this right now and see what i can come up with
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9929112
i think you will have to have CSS and use absolute position and some z-index

to make this work also
0
 
LVL 3

Author Comment

by:mrh30
ID: 9929126
I've been working on an idea I found:

Basically you have two divs, with the same position and size.  One contains the links etc, the other is transparent and has the onmouseover events etc attached to it.  Think I'm making some progress.
0
 
LVL 3

Accepted Solution

by:
mrh30 earned 0 total points
ID: 9929328
Right finally sorted it out (answering my own question!).

What was happening was that the onmouseout event from the anchors was propagating upwards to the div and triggering its onmouseout event.  Consequently this just needed to be canceled, with a function like:

function stopProp(event) {
      if (document.all) {
            window.event.cancelBubble = true;
      } else {
            event.stopPropagation();
      }
}

attached to the onmouseout event of the anchors.
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9930377
for IE only right?
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9930864
No objection from me

Glad you got your problem solved
0
 

Expert Comment

by:YensidMod
ID: 9946097
Question has been PAQed and 500 points refunded.

YensidMod
Experts Exchange Moderator
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

735 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question