Can I have an onclick event on a imagemap area element?

Question

I would like to put an onclick event on an area element. Here is my setup:

<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
    <map name="Map">
    <area class="blue" onclick="myFunction()" shape="poly" coords="2318,480,1510,1284" href="#">
</map>

I have tried 2 different ways to have an onclick event. Firstly i tried this:

$(".blue").click( function(event){
    alert('test');
});

I have also tried this:

function myFunction() {
    alert('test');
}

Neither of the above work. Do area elements support the above, or do they only support having a href?

Which value do you need to get ? also, you've an extra quote on `"2318,480,1510,1284""` ? — Pedro Lobito, Apr 28 '15 at 14:02
@PedroLobito i need to call a javascript function on click, this extra quote was a typo — danyo, Apr 28 '15 at 14:15
that's it ?! you don't need the coords the user clicked on ? — Pedro Lobito, Apr 28 '15 at 14:16

score 37 · Accepted Answer · answered Apr 28 '15 at 14:10

37

Pay attention:

Attribute href is obligatory, without it the area-tag does nothing!
To add a click event, you'll need to block default href.

Your code should start as follows:

$(".blue").on("click", function(e){
    e.preventDefault();
    /*
       your code here
    */
});

Live example here.

answered Apr 28 '15 at 14:10

That's a great answer... But may I know what I need to change to display image on click ? Kindly refer to this question http://stackoverflow.com/questions/34046331/display-image-in-a-popup-same-window-onclick-of-a-particular-area-on-the-base – Yash Saraiya Dec 03 '15 at 05:14
In HTML 5, href may be omitted: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area – Brent Washburne Oct 02 '19 at 13:27

score 9 · Answer 2 · edited Mar 22 '21 at 21:33

9

Its the shape that's the problem. Your code has set shape equal to polygon but only has 4 points in the coordinates attribute. You need to set shape to rectangle instead.

Set shape="rect" like this:

<img id="image" src="wheel.png" width="2795" height="2795" usemap="#Map" >
    <map name="Map">
    <area class="blue" onclick="myFunction()" shape="rect" coords="2318,480,1510,1284" href="#">
</map>

edited Mar 22 '21 at 21:33

kabr8

341
1
2
19

answered Mar 02 '17 at 14:05

treeFan

1,163
16
20

This actually answered the OP's question, and didn't need jquery. – Bill Dec 27 '18 at 19:38

score 3 · Answer 3 · answered Oct 04 '17 at 22:25

Use a class for all elements you want to listen on, and optionally an attribute for behavior:

<map name="primary">
  <area shape="circle" coords="75,75,75" class="popable" data-text="left circle text">
  <area shape="circle" coords="275,75,75" class="popable" data-text="right circle text">
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">
<div class='popup hidden'></div>

Then add your event listeners to all elements in the class:

const popable = document.querySelectorAll('.popable');
const popup = document.querySelector('.popup');
let lastClicked;

popable.forEach(elem => elem.addEventListener('click', togglePopup));

function togglePopup(e) {
  popup.innerText = e.target.dataset.text;

  // If  clicking something else, first restore '.hidden' to popup so that toggle will remove it.
  if (lastClicked !== e.target) {
    popup.classList.add('hidden');
  }
  popup.classList.toggle('hidden');
  lastClicked = e.target;  // remember the target
}

Demo: https://codepen.io/weird_error/pen/xXPNOK

When having a **href** this needs `e.preventDefault()` – Clemens Tolboom Apr 26 '22 at 07:08 — Clemens Tolboom, Apr 26 '22 at 07:08

score 2 · Answer 4 · answered Apr 28 '15 at 14:17

2

Based on your comments, you just need this:

$("#image").click( function(){
 alert("clicked");
//your code here
});

Demo:

http://codepen.io/tuga/pen/waBQBZ

answered Apr 28 '15 at 14:17

Pedro Lobito

94,083
31
258
268

score 2 · Answer 5 · answered Oct 05 '17 at 15:16

2

This is a simple one:

<area class="blue" onclick="alert('test');" shape="poly" coords="2318,480,1510,1284" href="#">

Or for any other code:

<area class="blue" onclick="//JavaScript Code//" shape="poly" coords="2318,480,1510,1284" href="#">

answered Oct 05 '17 at 15:16

Timor

91
6

1

You have added a snippet but without content so nothing "to see" is render, maybe you can modify html code to exactly view running the snippet what you did – Kalamarico Oct 05 '17 at 15:39

Jules · Answer 6 · 2015-04-28T14:15:27.590

1

Try :

<img  src="wheel.png" width="2795" height="2795" alt="Weels" usemap="#map">

<map name="map">
 <area shape="poly" coords="2318,480,1510,1284" alt="otherThing" href="anotherFile">
</map>

You souldn't want to add onClick events on area, documentation :

The tag defines an area inside an image-map (an image-map is an image with clickable areas).

Edit : your coords are a bit weird since its supposed to the couples of each vertices (so right now, your polygon is a line)

edited Apr 28 '15 at 14:15

answered Apr 28 '15 at 14:07

Jules

295
1
10

1

But i would like to call some javascript onclick. Is this not achievable? – danyo Apr 28 '15 at 14:10
1

Sure just add an id on the area you want to click on and use `$("#id").on("click", function(e){ //DoSTG });` – Jules Apr 28 '15 at 14:13

score 0 · Answer 7 · answered Oct 04 '17 at 22:09

I found this question by @TimorEranAV HTML map that displays text instead of linking to a URL and was marked as duplicate, but i think what he was expecting is this,

<html>
<head>
 <title> Program - Image Map</title>
</head>
<body>


 <img src="new.png" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" title = "Sun">
  <area shape="rect" coords="82,0,100,126" href="mercur.htm" alt="Mercury" title = "Mercury">

</map>

</body>
</html>

Here the title tag gives the opportunity to add a hover text(tip) to the image map.

Can I have an onclick event on a imagemap area element?

7 Answers7

Linked