Javascript 单击此图像的地图区域时获取img标记id

我有一些像这样的地图区域的图片

我需要在单击区域内区域时获取图像id
我可以不用js实现自定义区域功能吗

UPD

UPD2发现了第二个其他问题。 第一个区域（红色），由第二个图像覆盖，不可点击，z索引表示区域不工作

最终UPD
我编写了用于映射某些对象的小型自定义函数。
也许它会帮助某人：

---

只需将ClickHandler添加到地图的区域（图像），而不是地图本身

如果您使用的是jQuery，可以这样做：

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

---

假设您可以使用jQuery：

<img id="planetsimg" 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" onclick="clicked(this)" alt="Sun" image-id="planetsimg">
  <area shape="circle" coords="90,58,3" href="mercur.htm" onclick="clicked(this)" alt="Mercury" image-id="planetsimg">
  <area shape="circle" coords="124,58,8" href="venus.htm" onclick="clicked(this)" alt="Venus" image-id="planetsimg">
</map>

<script>
function clicked(map) {
    var image = $('#' + $(map).attr('image-id'));
    alert('img ' + image + ' clicked map ' + $(map).attr('href'));

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

单击的函数（映射）{
var image=$（'#'+$（map.attr（'image-id'））；
警报（'img'+image+'单击地图'+$（map.attr（'href'））；
return false；//阻止href正常打开。如果要打开链接，请返回true

我希望这就是您要找的

JS小提琴示例：

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> 

---

我没有尝试成功的方法。例如，目标返回区域id，elementFromPoint在这种情况下不好，因为一个区域覆盖在另一个图像上以进行澄清；您想在单击图像时获取图像id吗？我想在其地图区域内单击图像时获取图像id是“地图区域”基于图像的边框还是您专门创建的区域？我猜是在这些灰色区域，如果您单击此处，它将不会选择？如果您也发布一些HTML，这将有所帮助。请不要像那样使用单击处理程序（请参阅我的解决方案）我不需要区域id。它如何帮助获取图像对象？是的，这是解决方案，但对于每个需要创建贴图的图像。我在结构

中考虑了这一点，并使用单击区域的上一个元素，但所有区域都是兄弟区域，并且有很多图像。我不想制作这么多贴图。如果我使用js为de创建自定义矩阵会更好保护区。

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