32

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?

5
  • Which value do you need to get ? also, you've an extra quote on "2318,480,1510,1284"" ? Apr 28, 2015 at 14:02
  • The zone that you try to click is not clickable! :) Apr 28, 2015 at 14:08
  • is this default behaviour?
    – danyo
    Apr 28, 2015 at 14:09
  • @PedroLobito i need to call a javascript function on click, this extra quote was a typo
    – danyo
    Apr 28, 2015 at 14:15
  • that's it ?! you don't need the coords the user clicked on ? Apr 28, 2015 at 14:16

7 Answers 7

38

Pay attention:

  1. Attribute href is obligatory, without it the area-tag does nothing!

  2. 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.

2
11

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>
1
  • This actually answered the OP's question, and didn't need jquery.
    – Bill
    Dec 27, 2018 at 19:38
3

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

1
  • When having a href this needs e.preventDefault() Apr 26, 2022 at 7:08
2

Based on your comments, you just need this:

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

Demo:

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

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="#">

1
  • 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 5, 2017 at 15:39
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)

2
  • 1
    But i would like to call some javascript onclick. Is this not achievable?
    – danyo
    Apr 28, 2015 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, 2015 at 14:13
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.