0

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?

Marinescu Edward
  • 105
  • 3

1 Answers1

0

You can get the coordinates of your ".diff" with offset.

$(".diff").click(function(e)) {
    var offset = $(this).offset();
    var width = $(this).width();
    var height= $(this).height();
    // use offset.left and offset.top
    $(body).append("<div style=\"position:absolute;left:"+offset.left+";top:"+offset.top+";width:"+width+";height:"+height+";border:5px solid red\"></div>");
});

the generated div should be like (border red 5px) :

<div style="position:absolute;left:15px;top:20px;width:40px;height:100px;border:5px solid red"></div>
Apolo
  • 183
  • 1
  • 12