#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    2
    Rep Power
    0

    Almost-instant tooltip when mousing over an irregular polygon


    I am making a map. It will look something roughly analgous to what you can see on this page:

    http://cfpub.epa.gov/surf/state.cfm?statepostal=NY

    The polygons will be specifically defined by the vertices of the polygons (just like in that page).

    I want a tooltip to pop up when the user mouses over a region. However, using the normal title method takes too long. I want to cut down on the delay by maybe 75%, and have more control over the style of tooltip that appears (larger, different font, colors, etc.)

    I have looked at the CSS code described here:
    http://jsfiddle.net/kamil335/qGTUc/

    However, I do not know how to make the "hover button" fit invisibly over irreguarly-shaped polygons defined in my html.

    So for example, in the simplified code below, how can I make it so that each of the polygons displays a separate tooltip showing, perhaps, their name?

    Code:
    <map name="ny.map">
    
    <area shape="polygon" href="huc.cfm?huc_code=01100005" alt="01100005, Housatonic"
    coords="328,158 330,158 330,161 331,162 332,160 333,159 334,158 335,159 335,161 336,161 336,164">
    
    <area shape="polygon" href="huc.cfm?huc_code=05010002" alt="05010002, Conewango"
    coords="152,201 153,202 154,203 155,204 156,204 157,205 157,206 157,207 158,207 158,207 158,208">
    
    </map>
    Any help would be infinitely appreciated!
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    Welcome to DevShed.

    As this is your first post, I will let you off. In the future show your workings and where you are having issues. These are help forums; not do-it-all-for-you forums. You can use something like this.
    CSS Code:
    div#areaTooltip {
    	position: absolute;
    	left: 0;
    	top: -1000px;
    	border: 2px solid purple;
    	background-color: green;
    	color: red;
    }
    Javascript Code:
    var areaTitles = [], areaTooltip;
     
    function init() {
    	areaTooltip = document.getElementById('areaTooltip');
    	setMaps();
    }
     
    function setMaps() {
    	var imgs = document.getElementsByTagName('img');
    	for (var a=0, b=imgs.length; a<b; a++) {
    		if (imgs[a].hasAttribute('usemap')) {
    			var mapName = imgs[a].getAttribute('usemap').replace('#','');
    			var areas = document.getElementsByName(mapName)[0].getElementsByTagName('area');
    			for (var c=0, d=areas.length; c<d; c++) {
    				var areaRef = mapName+c;
    				areas[c].setAttribute('id', areaRef);
    				areaTitles[areaRef] = areas[c].getAttribute('title');
    				areas[c].title = '';
    				areas[c].onmouseover = function(evt) { 
    					evt = (evt || event);
    					areaTooltip.innerHTML = areaTitles[this.id];
    					areaTooltip.style.left = evt.clientX+'px';
    					areaTooltip.style.top = evt.clientY - (areaTooltip.offsetHeight + 3) +'px';
    				};
    				areas[c].onmouseout = function() { areaTooltip.style.top = "-1000px"; }
    			}
    		}
    	}
    }
     
     
    onload = init;
    HTML4Strict Code:
    <div id="areaTooltip"></div>
    Last edited by Winters; November 7th, 2013 at 04:04 AM. Reason: typo
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2013
    Posts
    2
    Rep Power
    0
    Thanks for the reply and help.

    For what it's worth, I never expected to get someone to do the work for me, nor did I even ask anyone to. I just wanted some pointers on where to start. I don't have workings because I'm new to CSS and can't even find the basic commands I would use to do this. I spent about an hour looking at work and found nothing, probably because I don't even know the right terminology to ask.

    If I offended anyone by asking this, I apologize, but I really didn't expect it to be out of line to ask for some help getting started on this project. I'm doing this as a side project at work, so I simply can't afford to spend the time necessary to learn CSS in its entirety from the ground up. I did look for a "complete CSS newb forum" and didn't see anything, so this is really the only option I have.

    Still, thanks for the help. I really don't understand like 90% of the code you posted, but I'll take time at work tomorrow to slog through it and figure it out : )
  6. #4
  7. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    It is more a warning to avoid in the future, as people who constantly ask for help on here without doing their own work get a reputation.
    Javascript Code:
    var areaTitles = [], areaTooltip; // Define global variables.
     
    function init() { // Code to run at document load.
    	areaTooltip = document.getElementById('areaTooltip');
    	setMaps();
    }
     
    function setMaps() { 
    	var imgs = document.getElementsByTagName('img'); // Assign all images to this variable.
    	for (var a=0, b=imgs.length; a<b; a++) { // Loop through images.
    		if (imgs[a].hasAttribute('usemap')) { // If current image is using a map.
    			var mapName = imgs[a].getAttribute('usemap').replace('#',''); // Assign the map name variable.
    			var areas = document.getElementsByName(mapName)[0].getElementsByTagName('area'); // Assign all areas within the map to this variable.
    			for (var c=0, d=areas.length; c<d; c++) { // Loop through all areas within the map.
    				var areaRef = mapName+c; // Assign a unique name for each area, using the mapname and loop itteration.
    				areas[c].setAttribute('id', areaRef); // Set an ID attribute using the unique name.
    				areaTitles[areaRef] = areas[c].getAttribute('title'); // Add the area title to the global array.
    				areas[c].title = ''; // Remove the area title to avoid double tooltips.
    				areas[c].onmouseover = function(evt) { // Assign mouseover event to the area.
    					evt = (evt || event);
    					areaTooltip.innerHTML = areaTitles[this.id]; // Onmouseover set the tooltip.
    					areaTooltip.style.left = evt.clientX+'px'; // Move the tooltip to the cursor X axis.
    					areaTooltip.style.top = evt.clientY - (areaTooltip.offsetHeight + 3) +'px'; // Move the tooltip to the cursor Y axis, less the tooltip height and some padding.
    				};
    				areas[c].onmouseout = function() { areaTooltip.style.top = "-1000px"; } // Assign onmouseout, which resets the tooltip off screen.
    			}
    		}
    	}
    }
     
     
    onload = init; // Initialise init() function at document load.
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.

IMN logo majestic logo threadwatch logo seochat tools logo