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

【问题标题】：Convert Image Map Area Coords to Absolutely Positioned Div将图像地图区域坐标转换为绝对定位的 Div
【发布时间】：2012-12-21 17:28:39
【问题描述】：

我有一个图像地图，其中包含我想尝试并自动转换为绝对定位的 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 完成，但我不太了解：/

【问题讨论】：

您需要强制使用 javascript。添加 javascript 或 jquery 标记。

标签： css html imagemap area

【解决方案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/

【讨论】：