Get Img Tag Id When Click On Map Area Of This Image

I have some images-figures with map-area like this and i need get image id when click inside area zone can i made it without custom area functional realisation with js? UPD sandbo

Solution 1:

I hope this is what you are looking for

JS Fiddle Example : http://jsfiddle.net/g5Dy3/44/

HTML

<imgid="dotted"src="image1.jpg"usemap="#ballmap"alt="sample" /><imgid="solid"src="image2"usemap="#ballmap2"alt="sample" /><mapname="ballmap"><areashape="circle"coords="210,120,90"href="#"alt="dotted ball"title="dotted ball"onclick="clickedMe(this);"></map><mapname="ballmap2"><areashape="circle"coords="126,90,70"href="#"alt="solid ball"title="solid ball"onclick="clickedMe(this);"></map>

JS

functionclickedMe(item) {
    var mapName;
    mapName = $(item).parent().attr('name');
    $('img').each(function(){
        if($(this).attr('usemap') == '#'+mapName){
            alert($(this).attr('id'));            
        }       
    });
}

Solution 2:

Like so assuming you can use jQuery:

<imgid="planetsimg"src="planets.gif"width="145"height="126"alt="Planets"usemap="#planetmap"><mapname="planetmap"><areashape="rect"coords="0,0,82,126"href="sun.htm"onclick="clicked(this)"alt="Sun"image-id="planetsimg"><areashape="circle"coords="90,58,3"href="mercur.htm"onclick="clicked(this)"alt="Mercury"image-id="planetsimg"><areashape="circle"coords="124,58,8"href="venus.htm"onclick="clicked(this)"alt="Venus"image-id="planetsimg"></map><script>functionclicked(map) {
    var image = $('#' + $(map).attr('image-id'));
    alert('img ' + image + ' clicked map ' + $(map).attr('href'));

    returnfalse; // Prevents href from opening normally. Return true if you want the link to open</script>

Solution 3:

just add the clickhandlers to the areas (images) of your map, not to the map itself

if you are using jQuery, you can do it like that:

$('map').find('area').each(function() {
  $(this).on('click',... 
});