<script src="./jquery.min.js"></script>
<script src="./jquery.Jcrop.js"></script>
<script type="text/javascript">
jQuery(function($){
var jcrop_api;
$('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords,
onRelease: clearCoords
},function(){
jcrop_api = this;
});
$('#coords').on('change','input',function(e){
var x1 = $('#x1').val(),
x2 = $('#x2').val(),
y1 = $('#y1').val(),
y2 = $('#y2').val();
jcrop_api.setSelect([x1,y1,x2,y2]);
});
});
// Simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
function showCoords(c)
{
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};
function clearCoords()
{
$('#coords input').val('');
};
function map(){
var x =$('#x1').val();
var y = $('#y1').val();
var x2 = $('#x2').val();
var y2 = $('#y2').val();
var w = $('#w').val();
var h = $('#h').val();
var a = Number(x)+Number(w);
var attr = x+","+y+","+a+","+y+","+x2+","+y2+","+x+","+y2;
$("#planetmap").append("<area href='http://baidu.com' shape='polygon' coords='"+attr+"'>");
}
</script>
<img src="pool.jpg" id="target" alt="[Jcrop Example]" />
<form id="coords"
class="coords"
onsubmit="return false;"
action="http://example.com/post.php">
<div class="inline-labels">
<label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
<label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
<label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
<label>W <input type="text" size="4" id="w" name="w" /></label>
<label>H <input type="text" size="4" id="h" name="h" /></label>
</div>
</form><br>
<map name="planetmap" id="planetmap">
<!-- <area href="nw.D110000renmrb_20131125_1-10.htm" shape="polygon" coords="311,166,467,331">-->
</map>
<img src="pool.jpg" id="target" alt="[Jcrop Example]" usemap="#planetmap" />
<input type="button" value="map" onclick="map()">
