javascript - 使用 JQuery 或其他工具将 HTML 代码添加到 Image Map

Question

使用JQuery或其他工具将HTML代码添加到Image Map中

我想实现以下结果 click here

我有一个带有可点击元素的图像，但我想在每个可点击元素旁边添加闪烁元素，例如 this one

<map id="ImageMapsCom-image-maps-2014-02-21-023745" name="map"> 
  <area id="conditioner" shape="poly" coords="1552.0333251953125,186,1551.0333251953125,203,1559.0333251953125,211,1626.0333251953125,213,1627.0333251953125,188" alt="Montarea condiționerului" title="Montarea condiționerului" target="_self" href="http://santehmaster.md/index.php?option=com_content&view=article&id=101&Itemid=771&lang=en"     />

  <area id="calorifere" shape="poly" coords="1573.0333251953125,289,1630.0333251953125,292,1630.0333251953125,328,1573.0333251953125,325" alt="Montarea caloriferelor" title="Montarea caloriferelor" target="_self" href="http://santehmaster.md/index.php?option=com_content&view=article&id=89&Itemid=737&lang=en"     />

  <area id="stingator" shape="poly" coords="1519,400,1520,407,1522,443,1535,445,1533,406" alt="Montarea sistemului de stingere cu hidranți" title="Montarea sistemului de stingere cu hidranți" target="_self" href="http://santehmaster.md/index.php?option=com_content&view=article&id=216&Itemid=872&lang=en"     />
</map>

插入这样的代码就好了

<map id="ImageMapsCom-image-maps-2014-02-21-023745" name="map"> 
  <span class="beacon"></span>

  <area id="conditioner" shape="poly" coords="1552.0333251953125,186,1551.0333251953125,203,1559.0333251953125,211,1626.0333251953125,213,1627.0333251953125,188" alt="Montarea condiționerului" title="Montarea condiționerului" target="_self" href="http://santehmaster.md/index.php?option=com_content&view=article&id=101&Itemid=771&lang=en"     />

  <span class="beacon"></span>
  <area id="calorifere" shape="poly" coords="1573.0333251953125,289,1630.0333251953125,292,1630.0333251953125,328,1573.0333251953125,325" alt="Montarea caloriferelor" title="Montarea caloriferelor" target="_self" href="http://santehmaster.md/index.php?option=com_content&view=article&id=89&Itemid=737&lang=en"     />

  <span class="beacon"></span>
  <area id="stingator" shape="poly" coords="1519,400,1520,407,1522,443,1535,445,1533,406" alt="Montarea sistemului de stingere cu hidranți" title="Montarea sistemului de stingere cu hidranți" target="_self" href="http://santehmaster.md/index.php?option=com_content&view=article&id=216&Itemid=872&lang=en"     />
</map>

Answer 1

只需获取区域元素的偏移量并将跨度添加到相同的偏移量上:

var offset=$("#conditioner").offset();
$("body").append("<span class='bacon'></span>").css({
  position:'absolute',
  top: offset.top,
  left: offset.left
});

请记住在浏览器调整大小时重新计算偏移量。