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

and javascript:

//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?


1 Answer 1


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>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .