0

I want to click a part of the image and get back the image 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>
Shady Nabhan
  • 3
  • 1
  • 2
    Welcome to Stack overflow. Can you please have a look at this link: https://stackoverflow.com/help/how-to-ask What have you tried so far? Thanks. – GBouffard Sep 26 '19 at 22:19
  • 1
    Possible duplicate of [can i have an onclick event on a imagemap area element](https://stackoverflow.com/questions/29921696/can-i-have-an-onclick-event-on-a-imagemap-area-element) – Tasos K. Sep 26 '19 at 22:28
  • The accepted answer in the suggested duplicate _is incorrect_ - you can have area elements without an `href` value. – traktor Sep 27 '19 at 03:38

2 Answers2

1

You almost have it done. You just need a little javascript to grab all of the area tags and add click handlers to them.

Then prevent the default navigation and instead, grab the title and show it.

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>
Will
  • 3,201
  • 1
  • 19
  • 17
0

Not sure about jQuery, but if you add a click handler to the map element you can get title from the event.target property. To give the user a hint that clicking does something, change the cursor to a non default value in CSS for AREA elements. href attributes can be removed.

area {
    cursor: pointer;
}
<img
  width="500" height="500"
  src= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEX8LSsK/jRMrvz8/vz8/nQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAADfVMiEAAAASklEQVR42mNwQQMMRAg4MAABkQKCQCCCS0AJBKgo4OLipKSEIWBsbGyEKaCkBPUcmoAjSCXNBBggAIeAIFA9qQIg83EJIGKEXAEAaERNUjAsUg8AAAAASUVORK5CYII="
  usemap="#image-map">

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