如何使用javascript/jquery获取图像映射的上/下x/y？

Question

使用jQuery的position()或offset(),我无法看到图像映射区域的顶部/左侧坐标.它适用于FF,但没有别的 - 没有webkit,IE,Opera.

$('area').bind("click",function(){
 alert($(this).position().left);
}); 

<area shape="rect" coords="14,25,205,150" href="#">

任何人都知道以不同的方式访问这些？通常情况下,我只需要使用坐标和分割(","),但这些页面上有一堆多面的区域.

Answer 1

如果要获取顶部和左侧坐标或包含矩形或多边形的块,请尝试此操作

var i, x = [], y = [];
var c = $(this).attr('coords').split(',');
for (i=0; i < c.length; i++){
 x.push( c[i++] );
 y.push( c[i] );
}
var t = y.sort(num)[0];
var l = x.sort(num)[0];
alert( 'top = ' + t + ', left = ' + l );
function num(a, b){ return (a-b); }

获取圆的左上角坐标,它取决于你是否想要包含cirlce的块的坐标

var c = $(this).attr('coords').split(',');
var t = c[1] - c[2];
var l = c[0] - c[2];
alert( 'top = ' + t + ', left = ' + l );

或者圆圈上最左上角和最左上角的点

var c = $(this).attr('coords').split(',');
var t = parseFloat(c[1]) - parseFloat(c[2]) * Math.cos(r);
var l = parseFloat(c[0]) + parseFloat(c[2]) * Math.sin(r);
alert( 'top = ' + t + ', left = ' + l );