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/

将图像映射区域坐标转换为绝对定位的Div

1 个答案: