javascript - 我想单击图像的一部分来获取标题

Question

我想点击图像的一部分并获取图像标题。

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://www.123dentist.com/wp-content/uploads/2017/06/teeth-numbering-systems.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="11" title="11" href="" coords="456,307,500,302,429,75,323,99" shape="poly">
    <area target="" alt="12" title="12" href="" coords="433,326,452,307,443,276,282,122,200,175" shape="poly">
    <area target="" alt="13" title="13" href="" coords="407,351,141,242,188,185,410,307,429,326" shape="poly">
    <area target="" alt="14" title="14" href="" coords="397,393,411,357,139,248,119,307" shape="poly">
    <area target="" alt="15" title="15" href="" coords="381,435,396,394,113,308,94,371" shape="poly">
    <area target="" alt="16" title="16" href="" coords="377,483,381,434,90,379,86,444" shape="poly">
    <area target="" alt="17" title="17" href="" coords="369,542,378,483,82,457,83,522" shape="poly">
    <area target="" alt="18" title="18" href="" coords="373,595,372,543,88,529,85,590" shape="poly">
</map>

Answer 1

你几乎已经完成了。您只需要一点 JavaScript 即可获取所有 area 标记并向其添加点击处理程序。

然后阻止默认导航，而是抓取标题并显示它。

const areas = document.querySelectorAll("area");
areas.forEach(area => area.addEventListener("click", show));

function show(event) {
  event.preventDefault();
  alert(event.currentTarget.title);
}

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://www.123dentist.com/wp-content/uploads/2017/06/teeth-numbering-systems.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="11" title="11" href="" coords="456,307,500,302,429,75,323,99" shape="poly">
    <area target="" alt="12" title="12" href="" coords="433,326,452,307,443,276,282,122,200,175" shape="poly">
    <area target="" alt="13" title="13" href="" coords="407,351,141,242,188,185,410,307,429,326" shape="poly">
    <area target="" alt="14" title="14" href="" coords="397,393,411,357,139,248,119,307" shape="poly">
    <area target="" alt="15" title="15" href="" coords="381,435,396,394,113,308,94,371" shape="poly">
    <area target="" alt="16" title="16" href="" coords="377,483,381,434,90,379,86,444" shape="poly">
    <area target="" alt="17" title="17" href="" coords="369,542,378,483,82,457,83,522" shape="poly">
    <area target="" alt="18" title="18" href="" coords="373,595,372,543,88,529,85,590" shape="poly">
</map>