Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

Does Onclick work on any element?

The onclick attribute is part of the Event Attributes, and can be used on any HTML elements.

What elements can have an onclick?

All HTML elements can have an onclick attribute.

Can I add Onclick in IMG tag?

The onclick is added over an image tag inside HTML. The onclick event will make our image clickable. After a user clicks on the image, you can do whatever you want, like opening a new webpage, adding animations, changing an existing image with a new one, and so on. Inside the onclick , you can pass a function.


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.


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>

Based on your comments, you just need this:

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

Demo:

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


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


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

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)