pop-up on image map acting weird

[Chrys]

I have an image map that I have a separate tool-tip for each poly area. I have a script that pops up a seperate divide for each area at the position of the mouse. The script pops up the tool-tip mostly but it doesn't hide it on mouse-out as I had hoped. If anyone has some thoughts that would point me in the right direction it would be most appreciated!

I know I have ALOT of code here but I am just not sure where the problem is so I put as much as I could.

JavaScript:

function pw() 
	{return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
	}; 
function mouseX(evt) 
	{return evt.clientX ? evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) : evt.pageX;
	} 
function mouseY(evt) 
	{return evt.clientY ? evt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) : evt.pageY
	}
function popUp(evt,oi) 
	{if (document.getElementById) 
		{var wp = pw(); dm = document.getElementById(oi); ds = dm.style; st = ds.visibility; 
			if (dm.offsetWidth) ew = dm.offsetWidth; 
			else if (dm.clip.width) ew = dm.clip.width; if (st == "visible" || st == "show") { ds.visibility = "hidden"; } 
			else 
			{tv = mouseY(evt) + 20; lv = mouseX(evt) - (ew/4); 
				if (lv < 2) lv = 2; 
				else if (lv + ew > wp) lv -= ew/2; lv += 'px';tv += 'px';  ds.left = lv; ds.top = tv; ds.visibility = "visible";
			}
		}
	}

function original() {
document.usa_map.src = usa.src;
document.getElementByClassName('tip').style.visibility = 'hidden';
return true;
}

function al_switch() {
document.usa_map.src = al.src;
popUp(event,'tt_al');
return true;

function ga_switch() {
document.usa_map.src = al.src;
popUp(event,'tt_coming_soon');
return true;
}

CSS:

.tip {
position:absolute;
z-index:100;
visibility:hidden;
top:50px;
left:50px;
}

HTML: (separate divide for each tool-tip)

<area shape="poly" alt="Alabama" coords="662,385,706,380,726,444" onMouseOver="al_switch()" onMouseOut="original()"/>

<area shape="poly" alt="Georgia" coords="797,468,788,467" href="georgia.html" onMouseOver="ga_switch()" onMouseOut="original()"/>

<div id="tt_coming_soon" class="tip">Courses will be available in this state soon!</div>
<div id="tt_al" class="tip">Available in Alabama:<br/>Continuing Education Courses</div>

[sunfighter]

Normally tooltips are controlled via css hover. And I wouldn't use visibility, because it does claim the space it uses in the html. Use display none and inline.

[Logic Ali]

Originally Posted by Chrys

function original() {
document.usa_map.src = usa.src;
document.getElementByClassName('tip').style.visibility = 'hidden';
return true;
}

You could start by using the error console, which should tell you that document.getElementByClassName is not a function (nor can it be).

[Old Pedant]

Originally Posted by sunfighter

And I wouldn't use visibility, because it does claim the space it uses in the html. Use display none and inline.

Doesn't matter.

Look at the class:

.tip {
    position:absolute;
    ...

Anything positioned absolute won't affect the positioning of other elements.

I happen to agree with you: I always use display instead of visibility for stuff like this. But in practice it doesn't matter.