I have a custom map of the USA with about 20 polygonal hot spots. I would like a box to pop up next to each hot spot on hover, with text and links drawn from my DB specific to the location. I would have thought this is a common situation, but I can't find a solution that works. I tried using an asp:imagemap and an ajax popup extender but you can't assign IDs to hotspots and it doesn't support mouseover events. I tried css with an html image map but I can't figure out how to use css solutions with polygonal hot spots, and I also don't know how to link it to get the data from the db without asp targets (I'm not very familiar with jquery, which would work, I am guessing). Anyone know of any simple-ish solutions out there?
A:
This requires a javascript solution (with data of course supplied server-side). Have you seen http://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map yet to get you started?
In fact, the provided answer provides a link to http://plugins.jquery.com/project/maphilight and a demo at http://davidlynch.org/js/maphilight/docs/demo_usa.html. It's not exactly what you're looking for, but it's close.
I'd be happy to point out how to best integrate your server-side data with your client-side map highlighting, but would need more info.
Ted
2010-05-13 00:33:27
Hi, yes, I looked at that thread and the Map Hilight demo but it doesn't seem applicable because I don't want highlighting, and the popup box is meant for only a small amount of static data, not multiple paragraphs drawn from a db. Basically, I want a popup box to come up when you hover over the imagemap hotspots, and inside that popup would be about 5 - 10 paragraphs worth of addresses and links for that particular area. I am splitting the US map up into multiple state regions (northeast, etc) for simplicity. This is all on an aspx page.
lbholland
2010-05-14 14:32:37
The main trouble with MapHilight is that the pop-up doesn't stay open on hover, so I couldn't use links within it.
lbholland
2010-05-14 14:53:23
+1
A:
I don't see why this is any different than creating a popup in any other context. There are a number of ways to attach "data" to an area element. The simplest I can think of is to use the alt attribute.
Check out this demo for example. (Code below.)
HTML
<body>
<p>Hover on the sun or on one of the planets to get its info:</p>
<div id="map">
<div id="overlay"></div>
<img src="http://www.w3schools.com/TAGS/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
</div>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.w3schools.com/TAGS/sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.w3schools.com/TAGS/mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="http://www.w3schools.com/TAGS/venus.htm" />
</map>
</body>
JS
$('area').each(function(){
var area = $(this),
alt = area.attr('alt');
area.mouseenter(function(){
$('#overlay').html(alt);
}).mouseleave(function(){
$('#overlay').html('');
});
});
CSS
#map {
position: relative;
}
#overlay {
position: absolute;
background: #000;
color: #fff;
top: 20px;
left: 20px;
}
No AJAX calls, but those could easily be added to the mouseenter and mouseleave event s of each area element.
Adam
2010-05-13 00:43:19
Hi, how would you go about using this method to force the popups to hover next to the actual hotspot, instead of in some fixed spot, without having to create a div for each hotspot (I have too many for it to be practical to hard code them)?
lbholland
2010-05-14 14:41:06
Also, the popup box needs to stay open while you hover over it as well as the hotspot, so that the user can click http links within (like Google maps). Basically, I want something very similar to the popup functionality on google maps.
lbholland
2010-05-14 14:47:24