HTML, jQuery : Show text over area of image-map

Question

I have an image-map like:

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map> 

I use jQuery to append span to area but no chance to show any thing over area.

Is there any way to show text over area, like tooltip, but without mouse over, text over area when page loaded?

Thanks for any help.

Answer 1

When you add the span, use something such as:

(Not tested)

jQuery('map_div').append('span').text('Mercury').css({position:'absolute', left:'10px',top:'10px',z-index:'1'})

You may also need to apply z-index to any divs which will be underneath these spans

Another alternative would be to set a relative positioned div with appropriate margins:

jQuery('map_div').append('span').text('Mercury').css({position:'relative', margin-left:'-20px',margin-top:'-20px'})

I tend to use either these methods depending on the context.

Here is a working example

Answer 2

I used the ImageMapper jQuery plugin to solve exactly this problem. Here is some sample code:

<div>
<img id="ohiomap" src="images/map.png" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="poly" coords="33,140,69,115,85,107,98,97" href="#" name="northwest" />
    <area shape="poly" coords="75,98,76,234,287,65,43,97" href="#" name="centralwest" />
</map>
</div>

The javascript looks like this:

var image = $('#ohiomap');
image.mapster({
fillOpacity: 0.1,
fillColor: "d42e16",
isSelectable: false,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
toolTipContainer: '<div style="width:100px; height:100px; color:#BBBBBB"> </div>',       
showToolTip: true,
toolTipClose: ["area-mouseout"],
areas: [{
        key: "northwest",
        toolTip: nwTooltip,
    },        
    {
        key: "centralwest",
        toolTip: cwTooltip
    }]
})
.mapster('tooltip','northwest');

It works great, and has the added value that it automatically scales your image map coords when viewed on various sized monitors and resolutions.

However, the unreleased version 1.2.7 adds important improvements to the ToolTip function -- check out this example.

Answer 3

Use Jquery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script>
    $(function() { 
    $(document).tooltip({position: {at: "left-275 top-375",of: "area"}});
    });
</script>

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"/>
<map name="planetmap">
   <area shape="rect" title= "Sun" coords="0,0,82,126" href="sun.htm" alt="Sun"/>
   <area shape="circle" title="Mercury" coords="90,58,3" href="mercur.htm" alt="Mercury" />
   <area shape="circle" title="Venus" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>