SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: DHTML/Image Map Tooltips (Help!)
-
Sep 13, 2001, 22:12 #1
- Join Date
- Jun 2001
- Location
- Oklahoma
- Posts
- 3,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
DHTML/Image Map Tooltips (Help!)
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.
In the head tag I have:Code:#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>
Code:<img src="navmenu.gif" usemap="#navmap" />
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>
Colin Anderson
Ambition is a poor excuse for those without
sense enough to be lazy.
-
Sep 17, 2001, 07:51 #2
- Join Date
- Feb 2001
- Location
- Clearwater, FL
- Posts
- 3,615
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<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()" />
-
Sep 17, 2001, 14:38 #3
- Join Date
- Jun 2001
- Location
- Oklahoma
- Posts
- 3,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!Colin Anderson
Ambition is a poor excuse for those without
sense enough to be lazy.
-
Sep 18, 2001, 06:42 #4
- Join Date
- Feb 2001
- Location
- Clearwater, FL
- Posts
- 3,615
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Sep 18, 2001, 16:02 #5
- Join Date
- Jun 2001
- Location
- Oklahoma
- Posts
- 3,392
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well I need the onclick (I think) for the fading effect, right? How would I make it go to the proper URL then?
Colin Anderson
Ambition is a poor excuse for those without
sense enough to be lazy.
Bookmarks