css - 将图像地图区域坐标转换为绝对定位的 Div

Question

我有一个图像地图，其中包含我想尝试并自动转换为绝对定位的 div 的区域。

我想转换这个：

<area shape="rect" coords="662,346,937,426" href="#" />

对此（包含在绝对 div 中）：

<a style="left:662px; top:346px; width:275px; height:80px;" href="#" />

基本上它归结为转换：

<area shape="rect" coords="A,B,C,D" href="#" />

对此（包含在绝对 div 中）：

<a style="left:Apx; top:Bpx; width:C-Apx; height:D-Bpx;" href="#" />

我想找到一种通过脚本和/或查找/替换来自动执行此操作的方法。我不认为正则表达式会起作用，因为它们不做任何计算（请随意证明我错了）。它可能可以用 Javascript 完成，但我不太了解：/

Answer 1

您可以使用 JQuery 解决此问题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
    var cords = $('.area1').attr('coords').split(',');
    $('.href1').attr('style', 'left:'+cords[0]+'px; top:'+cords[1]+'px; width:'+ (cords[2]-cords[0]) +'px; height:'+ (cords[3]-cords[1]) +'px')
});​
</script>


<area class='area1' shape="rect" coords="662,346,937,426" href="#" />
<a class='href1' style="left:0; top:0; width:0; height:0;" href="#" ></a>​

测试：http: //jsfiddle.net/G8TLm/1/