Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts

    pop-up on image map acting weird

    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:
    Code:
    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:
    Code:
    .tip {
    position:absolute;
    z-index:100;
    visibility:hidden;
    top:50px;
    left:50px;
    }
    HTML: (separate divide for each tool-tip)
    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    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.

  • #3
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Chrys View Post
    Code:
    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).

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Quote Originally Posted by sunfighter View Post
    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:
    Code:
    .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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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