Solved

onmouseover/onmouseout of td elements

Posted on 2003-12-12
15
1,646 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
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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

786 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