SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Wizard Aes's Avatar
    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.
    Line 91 is highlighted in bold red below.

    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>
    Then in the body portions I have:
    Code:
    <img src="navmenu.gif" usemap="#navmap" />
    And here's the image map code:
    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.
    Last edited by Aes; Sep 11, 2001 at 18:01.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •