SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  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.
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  2. #2
    Xbox why have you forsaken me? moospot's Avatar
    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()" />
    The links aren't pointing to anything! href="#" means it is pointing to the same page.

  3. #3
    SitePoint Wizard Aes's Avatar
    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.

  4. #4
    Xbox why have you forsaken me? moospot's Avatar
    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

  5. #5
    SitePoint Wizard Aes's Avatar
    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

Posting Permissions

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