jQuery - div border around map area

Question

Let's say I have this map:

<map name="diffmap1" id="diffmap1" class="myMap">
<area shape="poly" coords="152,347,253,292,264,307,167,358" class="diff diff1">
<area shape="poly" coords="93,244,164,215,171,233,97,264" class="diff diff2">
</map>

and javascript:

$('.diff').click(function(e){
//code here
});

How can I make when I click on one one 'diff' to make a div with border appear around that 'diff'?

It has to calculate the position automatically, like the margin-top, margin-left and size based on the coordonates.

Any thoughts?

Answer 1

There is no way to put a border around an area of an image map using straight HTML/CSS.

You can however do this with SVG. I would recommend this plugin: http://www.outsharked.com/imagemapster/ particularly its stroke settings.

Here's a simple demo which hopefully does what you want:

<img src="path/to/img" width="400" height="333" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="poly" coords="104,121,53,151,53,210,103,239,154,210,154,152" href="#" />
  <area shape="poly" coords="156,212,105,242,105,301,155,330,206,301,206,243" href="#" />
  <area shape="poly" coords="260,212,209,242,209,301,259,330,310,301,310,243" href="#" />
  <area shape="poly" coords="313,122,262,152,262,211,312,240,363,211,363,153" href="#" />
  <area shape="poly" coords="260,32,209,62,209,121,259,150,310,121,310,63" href="#" />
</map>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<script>
$('img').mapster({
  fillOpacity: 0,
  stroke: true,
  strokeColor: "3320FF",
  strokeWidth: 4,
  singleSelect: true,
});

fiddle