点击此图片的地图区域时获取img标记ID [英] Get img tag id when click on map area of this image

问题描述

我有一些像地图一样的图像，像这样

我需要获取图像ID时，点击区域内的区域

我可以让它没有自定义区域功能实现与js？

UPD

解决方案

我希望这就是您要找的内容

JS小提琴示例： http://jsfiddle.net/g5Dy3/44/

HTML

 < img id =dottedsrc =image1.jpgusemap =＃ballmapalt =sample/> 
< img id =solidsrc =image2usemap =＃ballmap2alt =sample/> 
 
  

JS

  function clickedMe（item）{
 var mapName; 
 mapName = $（item）.parent（）。attr（'name'）; $（$）$（$）$（$'$'）$（$'$'）。 （this）.attr（'id'））; 
} 
}）; 
} 
  

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 sandbox

UPD2 found second, other problem. first area zone (red), which covered by second image not clickable and z-index for area not working.

FINAL UPD
I wrote small custom function for mapping some objects.
Maybe it will help someone:
jsFiddle

解决方案

I hope this is what you are looking for

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

HTML

<img id="dotted" src="image1.jpg" usemap="#ballmap" alt="sample" />
<img id="solid" src="image2" usemap="#ballmap2" alt="sample" />

<map name="ballmap">
    <area shape="circle" coords="210,120,90" href="#" alt="dotted ball" title="dotted ball" onclick="clickedMe(this);">
</map>
<map name="ballmap2">
    <area shape="circle" coords="126,90,70" href="#" alt="solid ball" title="solid ball" onclick="clickedMe(this);">
</map> 

JS

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

这篇关于点击此图片的地图区域时获取img标记ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！