css - 将图像 map 区域坐标转换为绝对定位的 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/