Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

onmouseover/onmouseout of td elements

Posted on 2003-12-12
15
Medium Priority
?
1,653 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

722 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