Text on top of image map

Question

Currently, I have an image with a image map. Is there a way for me to write some JavaScript code that will use the area name as a variable to display what is actually on it? All the text and area names are inside a data array already.

For example, if this area is named Area1, it'll have the text Text1 inside, and etc.

Why would I want to do this? It's easier for me to print it out with the names on it.

Edit: Example of image map

<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>

ok is that some sort of API? Do you have some code you can share? — JasTonAChair, Dec 13 '14 at 01:02
not sure what browser support you're required to provide but if your users aren't from a third-world nation or in a nursing home you can generally just do this in CSS (without the area map) — Deryck, Dec 13 '14 at 01:56

dm4web · Accepted Answer · 2014-12-13T02:12:50.213

4

Not very precise, but it can be a good basis for further improvement

http://jsfiddle.net/6amd2842/1/

HTML:

<div id="map">
    <img src="http://placehold.it/145x126" width="145" height="126" alt="Planets" usemap="#planetmap">
</div>

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

CSS:

#map {
    position:relative
}
.map_title {
    position:absolute;    
}

JQ:

$(function() {

    $('area').each(function(){
        var txt=$(this).data('name');
        var coor=$(this).attr('coords');
        var coorA=coor.split(',');
        var left=coorA[0];
        var top=coorA[1];

        var $span=$('<span class="map_title">'+txt+'</span>');        
        $span.css({top: top+'px', left: left+'px', position:'absolute'});
        $span.appendTo('#map');
    })

})

edited Dec 13 '14 at 02:12

answered Dec 13 '14 at 01:58

dm4web

4,642
1
14
20

Thank you so much for this. It did exactly what I want to do. – nonion Dec 13 '14 at 04:27
1 Last thing though, do you know how to make it auto position? So that it fits inside the border. Example: http://i.imgur.com/ky35mC9.jpg. For this, the names are overrunning the border :\ While some others are just in 1 location :( – nonion Dec 13 '14 at 04:36
Try something like this: http://stackoverflow.com/questions/27451159/show-text-on-top-of-image/27455167#27455167. Works for a rectangle – dm4web Dec 13 '14 at 04:45

Text on top of image map

1 Answers1

Linked