Control the effect of an onMouseOver function.

[Justin Rowe]

I'm attempting to design a site with alot of dynamic content and
intractability, however I've hit a snag when it comes to the function of
the onMouseOver and onMouseOut events. Using a bit of code from
QuirksMode to grab the location of the mouse, I've built a tooltip
function to show a tooltip to the user depicting the target of a link,
the problem is when you mouse over the box that the tooltip function is
attatched to the tooltip flickers... Alot. I attempted to halt the
flickering and movement of the tooltip as the mouse moves across the
link (which is a 15x18 red square) but it seems that even as you move
about in the square, it keeps calling it's MouseOut event.

The following is the JavaScript code in question:

function inittooltip(target)
{
tltp = new getObj(target);
tltp.obj.onmouseover = showtooltip;
tltp.obj.onmouseout = stoptooltip;
}

function showtooltip(e)
{
var isOpera = (navigator.userAgent.indexOf('Opera') != -1);
var isIE = (!isOpera && navigator.userAgent.indexOf('MSIE') != -1)

var posx = 0;
var posy = 0;
var targ;

if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}else if (e.clientX || e.clientY)
{
posx = e.clientX;
posy = e.clientY;
if (isIE)
{
posx += document.body.scrollLeft;
posy += document.body.scrollTop;
}
}

if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;

if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug

if (targ == "[object HTMLImageElement]") targ = targ.parentNode;

tltarg = new getObj('tltp' + targ.id);

if (tltarg.style.display != "block")
{
tltarg.style.left = posx + 'px';
tltarg.style.top = (posy - 20) + 'px';
tltarg.style.display = "block";
}
}

function stoptooltip(e)
{
var targ;

if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;

if (targ.nodeType == 3) targ = targ.parentNode;

if (targ == "[object HTMLImageElement]") targ = targ.parentNode;

tltarg = new getObj('tltp' + targ.id);

tltarg.style.display = "none";
}

function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}

else if (document.layers)
{
this.obj = getObjNN4(document,name);
this.style = this.obj;
}
}

function getObjNN4(obj,name)
{
var x = obj.layers;
var thereturn;
for (var i=0;i<x.length;i++)
{
if (x[i].id == name)
thereturn = x[i];
else if (x[i].layers.length)
var tmp = getObjNN4(x[i],name);
if (tmp) thereturn = tmp;
}
return thereturn;
}

As you can see, I have the code checking to see if the element is
already being displayed (display != "block"), but when I put an alert
box in to show me what the display value for the element is, I
consistantly get "none".

If anyone knows a way to solve this, or at the least why it is firing
the MouseOut event willy nilly, I would be much obliged.

[Zif]

Justin Rowe wrote:

I'm attempting to design a site with alot of dynamic content and
intractability, however I've hit a snag when it comes to the function of
the onMouseOver and onMouseOut events. Using a bit of code from
QuirksMode to grab the location of the mouse, I've built a tooltip
function to show a tooltip to the user depicting the target of a link,
the problem is when you mouse over the box that the tooltip function is
attatched to the tooltip flickers... Alot. I attempted to halt the
flickering and movement of the tooltip as the mouse moves across the
link (which is a 15x18 red square) but it seems that even as you move
about in the square, it keeps calling it's MouseOut event.

It probably happens because after you display the 'tool tip', if you
move the cursor over the tool tip the anchor element's mouseout fires
and hides the tip. Suddenly the cursor is over the element again, so
the mouseover event fires and shows the tool tip again. Move the cursor
and it happens all over again. It probably happens when you move the
cursor left to right, but not right to left (assuming you put the tool
tip to the right of the cursor).

Have a look here:

<URL:http://www.walterzorn.com/tooltip/tooltip_e.htm>
One solution is don't use the mouseout event of the anchor element to
hide the tool tip. Hide it when you get a mouseover event from an
element that is not: the anchor element, a child of the anchor element,
the tool tip itself or a child of the tool tip.

[...]

--
Zif

[babillon.networks]

Wow. That function works amazingly, however I'd rather not use it,
because I can't figure out for the life of me how it works. I make a
point not to just take something when I don't know how it works (no
good to get dependant on handed out code).

I tried getting the mouseover event of another element to close the
tooltip, however it doesn't seem to work (at least not with my layout).

Here's the revised code (less the object retrieval):
var tltarg;

function inittooltip(target)
{
tltp = new getObj(target);
tltp.obj.mouseover = showtooltip;
stoptltp = new getObj('navbox');
stoptltp.obj.onmouseover = stoptooltip;
}

function showtooltip(e)
{
var isOpera = (navigator.userAgent.indexOf('Opera') != -1);
var isIE = (!isOpera && navigator.userAgent.indexOf('MSIE') != -1)

var posx = 0;
var posy = 0;
var targ;

if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}else if (e.clientX || e.clientY)
{
posx = e.clientX;
posy = e.clientY;
if (isIE)
{
posx += document.body.scrollLeft;
posy += document.body.scrollTop;
}
}

if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;

if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug

if (targ == "[object HTMLImageElement]") targ = targ.parentNode;

tltarg = new getObj('tltp' + targ.id);

if (tltarg.style.display != "block")
{
tltarg.style.left = posx + 'px';
tltarg.style.top = (posy - 20) + 'px';
tltarg.style.display = "block";
}
}

function stoptooltip(e)
{
alert(e.target.id);
tltarg.style.display = "none";
}

And just for clarity, here is the page with the elements being
manipulated:
<div id="mainmenu" style="position: absolute; top: 100px; left:
300px;">
<span id="maintitle" style="z-index: 3;">
<img src="template/images/babilnet_title.jpg" />
</span>
<span id="navbox" style="z-index: 2;">
<span id="about" class="boxlink" onmouseover="inittooltip('about')">
<img src="template/images/babilnet_block.jpg" />
</span>
<span id="products" class="boxlink"
onmouseover="inittooltip('products')">
<img src="template/images/babilnet_block.jpg" />
</span>
<span id="subsidiaries" class="boxlink"
onmouseover="inittooltip('subsidiaries')">
<img src="template/images/babilnet_block.jpg" />
</span>
<span id="portfolio" class="boxlink"
onmouseover="inittooltip('portfolio')">
<img src="template/images/babilnet_block.jpg" />
</span>
<span id="content" class="boxlink"
onmouseover="inittooltip('content')">
<img src="template/images/babilnet_block.jpg" />
</span>
<span id="contact" class="boxlink"
onmouseover="inittooltip('contact')">
<img src="template/images/babilnet_block.jpg" />
</span>
<div id="display" style="z-index: 1;">
</div>
</span>

</div>
<span id="tltpabout" class="tooltip" style="z-index: 10; position:
absolute;">
About
</span>
<span id="tltpproducts" class="tooltip" style="z-index: 10; position:
absolute;">
Products
</span>
<span id="tltpsubsidiaries" class="tooltip" style="z-index: 10;
position: absolute;">
Subsidiaries
</span>
<span id="tltpportfolio" class="tooltip" style="z-index: 10; position:
absolute;">
Portfolio
</span>
<span id="tltpcontent" class="tooltip" style="z-index: 10; position:
absolute;">
Content
</span>
<span id="tltpcontact" class="tooltip" style="z-index: 10; position:
absolute;">
Contact
</span>

This is being pulled into an index.php via a require() function call.