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.

Take a look at css positioning. `position` and `z-index` are the properties you want to look at. — mreq, Jan 26 '12 at 09:17
I believe you will find your answer here: http://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map — Raul Marengo, Jan 26 '12 at 09:19
@Petr Marek : I use both of them, but problem is: when append span to area, there is nothing to show. — Morteza, Jan 26 '12 at 09:19
@Raul Marengo : Thanks but they all use hover, I need to show text without mouse-over — Morteza, Jan 26 '12 at 09:25
@NuLLeR You can probably use the same methodology, just trigger it onload rather than mouseover perhaps? — Raul Marengo, Jan 26 '12 at 09:27

RonnyKnoxville · Answer 1 · 2012-01-26T10:04:25.867

5

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

edited Jan 26 '12 at 10:04

answered Jan 26 '12 at 09:38

RonnyKnoxville

6,166
10
46
75

1

Im not sure if its browser specific when using jsfiddle. Im using firefox and I can see the word MERCURY over the top of the image when I load it up. Does it not display that way for you? – RonnyKnoxville Jan 26 '12 at 13:52
1

Tested on Firefox and that's OK. – Morteza Jan 26 '12 at 19:43

score 2 · Answer 2 · answered Oct 29 '12 at 18:24

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.

Suwarnakumar Kanapathipillai · Answer 3 · 2016-08-09T09:20:06.970

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>

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

3 Answers3

Linked