Image Map Popup

Made by Adam Schwartz (http://adamschwartz.co) for a StackOverflow question (http://stackoverflow.com/questions/2823678/image-map-popup-on-rollover-with-popup-text-drawn-from-database)

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>

CSS

#map {
    position: absolute;
}
#overlay {
    position: absolute;
    left: 200px;
    background: #000;
    color: #fff;
    top: 20px;
    left: 20px;
}

JavaScript

$('area').each(function(){
    var area = $(this),
        alt = "<a>"+area.attr('alt')+"</a>";
    area.mouseenter(function(){
        $('#overlay').html(alt);
    }).mouseleave(function(){
        $('#overlay').html('');
    });
});