Make Polygon Coordinates

by sbhomra

HTML

<div class="map-container">
    <img id="greenish-oval" src="http://web-scholar.com/stackoverflow/images/region-1.png" />
    <img id="reddish-three-pointer" src="http://web-scholar.com/stackoverflow/images/region-2.png" />
    <img id="green-w-like" src="http://web-scholar.com/stackoverflow/images/region-3.png" />
    <img id="blue-swan-head" src="http://web-scholar.com/stackoverflow/images/region-4.png" />
    <img id="blank"  src="http://web-scholar.com/stackoverflow/images/blank.gif" />
</div>
<em>click on shape in red border to create coords for area element</em>
polyline coords: <div id="polyline">&nbsp;</div>
<br />
<button id="clear">new polyline</button>

CSS

.map-container{
    position:relative;
    border:1px solid red;
    width:320px;
    height:240px;
}
.map-container img{
    position:absolute;
    top:0;
    left:0;
}
#blank{
    width:320px;
    height:240px;
}
#polyline{
    font-size:10px;
    font-family:courier;
    border:1px solid #ccc;
    display:inline-block;
}
em{
    display:block;
    font-style:italic;
    font-size:12px;
    color:#a55;
}

JavaScript

var polyline = [];
$('#blank').click(function(e){
    var offset = $(this).offset();
    var clickPos = {x:e.clientX - offset.left, y: e.clientY - offset.top};
    polyline.push( clickPos.x );
    polyline.push(clickPos.y);
    
    $('#polyline').html(polyline.toString());
    
});

$('#clear').click(function(){
    if (window.console!=undefined) 
    {console.log( polyline.toString());}
    else
    {alert('current polyline\n' + polyline.toString());}
    polyline = [];
    $('#polyline').html('&nbsp;');                     
});