DHTML/Image Map Tooltips (Help!)

[Aes]

When I click on the links that the image map specifies, I am unable to go anywhere. I'm almost positive the image map is correct, so I'm thinking it has something to do with the DHTML (unfortunately PHP is my expertise [if you want to call it that], not DHTML [or the JavaScript I guess]). I apologize profusely for the length of the code.

Edit:That's in Internet Explorer. In Netscape 4.x, I get this:

JavaScript Error: line 91:
this.elm has no properties.

Line 91 is highlighted in bold red below.

In the head tag I have:

#divTooltip { position : absolute ; top : 0px ; width : 175px ; visibility : hidden ; z-index : 200 ;
 background-color : #333366 ; layer-background-color : #333366 ; }
.normalStyle    { padding : 2px ; text-align : center ; font-weight : 500; width : 175px ;
 color:#ffffff ; top : 100px ; font-family : arial,helvetica,verdana ; font-size : 11px ;
 background-color : #333366 ; layer-background-color : #333366 ; border-width : 1px ; border-style : solid ;
 border-color : #ffffff ; cursor : default ; }
.netscape4Style { padding : 0px ; font-weight : 500 ; width : 175px ; color : #ffffff ;
 top : 100px ; font-family : arial,helvetica,verdana ; font-size : 11px ; background-color : #333366 ;
 layer-background-color : #333366 ; border : 1px solid #ffffff ; }
-->
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4||this.ie5||this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
	return this
}
var bw=new lib_bwcheck()

// Variables to set:

messages= new Array()
// Write your descriptions in here.
messages[0]="About the T-O District of Key Club International"
messages[1]="The Board of Trustees for the T-O District"
messages[2]="Learn about the different committees of the T-O District"
messages[3]="District Convention Information"
messages[4]="Current Projects in the T-O District"
messages[5]="Home of the District Publication"
messages[6]="Information and more for club officers and members"
messages[7]="Message Boards -- communicate with the District"
messages[8]="Frequently Asked Questions"
messages[9]="Connect with other K-family members"
// To have more descriptions just add to the array.

fromX= -1           // How much from the actual mouse X should the description box appear?
fromY= 21            // How much from the actual mouse Y should the description box appear?
ns4center= 1        // Centering the text in ns4 doesn't work with css, use this variable instead... the value is 1 or 0
useFading= 1        // 1 for a fading effect in windows explorer 5+ and all platforms ns6, 0 for no fading effect.
animation= 0        // 1 if you want animation, 0 for no animation.
detectiontype= 0    // 1 for 'smooth' window size detection, 0 for 'flip' window size detection.
delay= 100      // The time before showing the popup, in milliseconds.

if(document.layers){ //NS4 resize fix.
    scrX= innerWidth; scrY= innerHeight;
    onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} };
}

// object constructor...
function makeTooltip(obj){								
   	this.elm= document.getElementById? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;
   	this.css= bw.ns4?this.elm:this.elm.style;
   	this.wref= bw.ns4?this.elm.document:this.elm;
	this.obj= obj+'makeTooltip'; eval(this.obj+'=this');
	this.w= bw.ns4? this.elm.clip.width: this.elm.offsetWidth;
	this.h= bw.ns4? this.elm.clip.height: this.elm.offsetHeight;
};
makeTooltip.prototype.measureIt= function(){
	this.w= bw.ns4? this.elm.clip.width: this.elm.offsetWidth;
	this.h= bw.ns4? this.elm.clip.height: this.elm.offsetHeight;
};
makeTooltip.prototype.writeIt= function(text){
	if (bw.ns4) {this.wref.write(text); this.wref.close()}
	else this.wref.innerHTML= text;
};

// Mousemove detection
var mouseX=0,mouseY=0,setX=0,setY=0;
function getMousemove(e){
	mouseX= (bw.ns4||bw.ns6)? e.pageX: bw.ie4&&bw.win? event.x: bw.ie&&bw.win&&!bw.ie4? (event.x-2)+document.body.scrollLeft : event.x+document.body.scrollLeft;
	mouseY= (bw.ns4||bw.ns6)? e.pageY: bw.ie4&&bw.win? event.y: bw.ie&&bw.win&&!bw.ie4? (event.y-2)+document.body.scrollTop : event.y+document.body.scrollTop;
	if (isLoaded && hovering && animation) placeIt();
};
function placeIt(){
	if (detectiontype==1) setX= mouseX+fromX+tooltip.w > screenWscrolled ? screenWscrolled-tooltip.w: mouseX+fromX;
	if (detectiontype==1) setY= mouseY+fromY+tooltip.h > screenHscrolled ? screenHscrolled-tooltip.h: mouseY+fromY;
	if (detectiontype==0) setX= mouseX+fromX+tooltip.w > screenWscrolled ? mouseX-fromX-tooltip.w: mouseX+fromX;
	if (detectiontype==0) setY= mouseY+fromY+tooltip.h > screenHscrolled ? mouseY-fromY-tooltip.h: mouseY+fromY;
	if (setX<0) setX= 0;
	if (setY<0) setY= 0;
	tooltip.css.left= setX;
	tooltip.css.top= setY;
};

// Main popUp function.
var hovering=false, screenWscrolled=0, screenHscrolled=0;
makeTooltip.prototype.showTimer= null;
function popUp(num){
	if(isLoaded){
		clearTimeout(tooltip.popTimer);
		dopopOut();
		if (bw.ns4){
			var text= '<span class="netscape4Style">' + (ns4center?'<center>':"") + messages[num] + (ns4center?'</center>':"") + '</span>';
			tooltip.writeIt(text);
		}
		if (!bw.ns4) tooltip.writeIt(messages[num]);
		screenWscrolled= screenW + (bw.ie?document.body.scrollLeft:pageXOffset);
		screenHscrolled= screenH + (bw.ie?document.body.scrollTop:pageYOffset);
		hovering= true;
		
		/* I'm using a timeout for ie4 here, because it doesn't store the measurements quickly enough. Does anybody know why this happens? */
		if (bw.ie4) setTimeout('tooltip.measureIt(); placeIt();', delay/2);
		else { tooltip.measureIt(); placeIt(); }
		if (useFading) tooltip.showTimer= setTimeout('tooltip.blendIn()', delay);
		if (!useFading) tooltip.showTimer= setTimeout('tooltip.css.visibility="visible"', delay);
    }
};

// Hiding routines
makeTooltip.prototype.popTimer= null;
function popOut(){
	if (isLoaded) tooltip.popTimer= setTimeout('dopopOut()', 30)
};
function dopopOut(){
	hovering= false;
	clearTimeout(tooltip.showTimer);
	tooltip.css.visibility= 'hidden';
	clearTimeout(tooltip.fadeTimer);
	tooltip.i= 0;
};

// Measure screensize.
var scrollbarWidth= bw.ns6&&bw.win?14:bw.ns6&&!bw.win?16:bw.ns4?16:0;
function measureScreen() {
	tooltip.css.top= 0;
	tooltip.css.left= 0;
	screenW= (bw.ie?document.body.clientWidth:innerWidth) - scrollbarWidth;
	screenH= (bw.ie?document.body.clientHeight:innerHeight);
};

// Opacity methods.
makeTooltip.prototype.blendIn= function(){
	if (bw.ie && bw.win && !bw.ie4) {
		this.css.filter= 'blendTrans(duration=0.5)';
		this.elm.filters.blendTrans.apply();
		this.css.visibility= 'visible';
		this.elm.filters.blendTrans.play();
	}
	else {
		this.css.visibility= 'visible';
		if (!bw.ns4) this.fadeIt();
	}
};
makeTooltip.prototype.step= 8;
makeTooltip.prototype.i= 0;
makeTooltip.prototype.fadeTimer= null;
makeTooltip.prototype.fadeIt= function(){
	this.i+= this.step;
	//this.css.filter= 'alpha(opacity='+this.i+')';
	this.css.MozOpacity= this.i/100;
	if (this.i<100) this.fadeTimer= setTimeout(this.obj+'.fadeIt()', 40);
	else this.i= 0;
};

// Init function...
var isLoaded= false;
function popupInit(){
	//Fixing the browsercheck for opera... this can be removed if the browsercheck has been updated!!
	bw.opera5 = (navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?true:false
	if (bw.opera5) bw.ns6 = 0
	
	//Extending the browsercheck to add windows platform detection.
	bw.win= (navigator.userAgent.indexOf('Windows')>-1)

	tooltip= new makeTooltip('divTooltip');
	tooltip.elm.onmouseover= function(){ clearTimeout(tooltip.popTimer); if(bw.ns4){setTimeout('clearTimeout(tooltip.popTimer)',20)}; };
	tooltip.elm.onmouseout= dopopOut;
	if (bw.ns4) document.captureEvents(Event.MOUSEMOVE);
	document.onmousemove= getMousemove;
	measureScreen();
	if (!bw.ns4) onresize= measureScreen;
	if (!bw.ns4) tooltip.elm.className= 'normalStyle';
	if (bw.ie && bw.win && !bw.ie4) tooltip.css.filter= 'alpha(opacity=100)'; //Preloads the windows filters.
	isLoaded= true;
};

// Initiates page on pageload if the browser is ok.
if(bw.bw && !isLoaded) onload= popupInit;
</script>

Then in the body portions I have:

<img src="navmenu.gif" usemap="#navmap" />

And here's the image map code:

<map name="navmap">
<area shape="rect" coords="3,3,68,22" href="#" onmouseover="popUp(0)" onmouseout="popOut()" onclick="useFading=useFading?0:1; return false;" 
onfocus="if(this.blur)this.blur()" />
<area shape="rect" coords="76,3,122,22" href="#" onmouseover="popUp(1)" onmouseout="popOut()" onclick="useFading=useFading?0:1; return false;" 
onfocus="if(this.blur)this.blur()" />
<area shape="rect" coords="128,3,207,22" href="#" onmouseover="popUp(2)" onmouseout="popOut()" onclick="useFading=useFading?0:1; return false;" 
onfocus="if(this.blur)this.blur()" />
<area shape="rect" coords="213,3,289,22" href="#" onmouseover="popUp(3)" onmouseout="popOut()" onclick="useFading=useFading?0:1; return false;" 
onfocus="if(this.blur)this.blur()" />
<area shape="rect" coords="297,3,354,22" href="#" onmouseover="popUp(4)" onmouseout="popOut()" onclick="useFading=useFading?0:1; return false;" 
onfocus="if(this.blur)this.blur()" />
<area shape="rect" coords="360,3,429,22" href="#" onmouseover="popUp(5)" onmouseout="popOut()" onclick="useFading=useFading?0:1; return false;" 
onfocus="if(this.blur)this.blur()" />
<area shape="rect" coords="438,3,508,22" href="#" onmouseover="popUp(6)" onmouseout="popOut()" onclick="useFading=useFading?0:1; return false;" 
onfocus="if(this.blur)this.blur()" />
<area shape="rect" coords="516,3,569,22" href="http://members.boardhost.com/tokeyclub/" onmouseover="popUp(7)" onmouseout="popOut()" 
onclick="useFading=useFading?0:1; return false;" onfocus="if(this.blur)this.blur()" />
<area shape="rect" coords="577,3,620,22" href="#" onmouseover="popUp(8)" onmouseout="popOut()" onclick="useFading=useFading?0:1; return false;" 
onfocus="if(this.blur)this.blur()" />
<area shape="rect" coords="626,3,668,22" href="#" onmouseover="popUp(9)" onmouseout="popOut()" onclick="useFading=useFading?0:1; return false;" 
onfocus="if(this.blur)this.blur()" />
</map>
<div id="divTooltip"></div>

Thanks for any help you can offer with resolving this problem.

[moospot]

<area shape="rect" coords="3,3,68,22" href="#" onmouseover="popUp(0)" onmouseout="popOut()" onclick="useFading=useFading?0:1; return false;" 
onfocus="if(this.blur)this.blur()" />

The links aren't pointing to anything! href="#" means it is pointing to the same page.

[Aes]

Yes, I'm aware those don't work. The one with the actual URL in it doesn't work either though. I'm still getting that error as well.

Anyone? This is crippling the site!

[moospot]

Is this the tool tips from dhtml central?

I put the code in my page..ah ha!

You have the javascript OnClick method in your link. This is overriding the href commmand. Once you remove the OnClick from your image map links, they work fine.

As far as the Netscape issue, I ran it and got no errors.

enjoy

[Aes]

Well I need the onclick (I think) for the fading effect, right? How would I make it go to the proper URL then?