1

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?

Improve this question
1
  • The best example of the type of pop-up box functionality I need is Google Maps, with pop-up boxes that remain open so that the user can navigate to links within them. I'm willing to give up on the hover functionality and settle for hard clicks. In fact I had wanted to simply use Google maps but the designer is insisting on using a custom map graphic.
    – lbholland
    Commented May 14, 2010 at 14:51

2 Answers 2

Reset to default
2

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.

Improve this answer
2
  • 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
    Commented May 14, 2010 at 14:41
  • 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
    Commented May 14, 2010 at 14:47
1

This requires a javascript solution (with data of course supplied server-side). Have you seen 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.

Improve this answer
2
  • 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
    Commented May 14, 2010 at 14:32
  • 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
    Commented May 14, 2010 at 14:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.