HTML: Multiple images sharing a single map

I have lots of identical images which share a common map:

<map name="mymap">
  <area shape="polygon" coords="0,0,64,0,32,32" href="ref1">
  <area shape="polygon" coords="64,0,64,64,32,32" href="ref2">
</map>开发者_如何学Python

<img src="image.jpg" usemap="#mymap">
<img src="image.jpg" usemap="#mymap">

and I would like the followed link to depend on: 1. which image was clicked, 2. where in the image the click was. Above, I differentiate the locations in the image, but I wonder if there is a way to do something different depending on which image was clicked?

---

You could write some JavaScript to clone the map, rename it and assign it to a list of images.

or

Capture the mouse click coordinates and determine where the click is is relation to which image. If they're in a row you only need to check one coordinate.

You can trigger JavaScript using the href:

<area shape="polygon" coords="0,0,64,0,32,32" href="javascript:myFunction(1)">
<area shape="polygon" coords="0,0,64,0,32,32" href="javascript:myFunction(2)">

---

if you give each image an id attribute, i think you might be able to use a little bit of jquery to target the map element of each image and change the location of the window in javascript.

something along the lines of

$("#imgId map").click(function(){
    window.location = "http://www.google.com";
}


$("#imgId2 map").click(function(){
    window.location = "http://www.stackoverflow.com";
}

depending on the amount of images you have, if this seems like a lot or too repetitive, there might be a smarter way of being able to handle the links in javascript automatically.