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

Question

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

我想獲得以下結果， 請點擊這里

我有一個可點擊的元素的圖像，但我想閃爍的元素添加到旁邊每點擊elemnt，為examnle 這一個

<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

只需獲取area元素的偏移量並將跨度添加到相同的偏移量上即可：

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

切記要重新計算瀏覽器調整大小時的偏移量。

Answer 2

解決方法如下：

1. 首先，我包括用於調整圖像大小的腳本，以及在窗口調整大小時的區域坐標。

    <script> window.onload = function () { var ImageMap = function (map, img) { var n, areas = map.getElementsByTagName('area'), len = areas.length, coords = [], previousWidth = 1921; for (n = 0; n < len; n++) { coords[n] = areas[n].coords.split(','); } this.resize = function () { var n, m, clen, x = img.offsetWidth / previousWidth; for (n = 0; n < len; n++) { clen = coords[n].length; for (m = 0; m < clen; m++) { coords[n][m] = Math.round(parseInt(coords[n][m], 10) * x); } areas[n].coords = coords[n].join(','); } previousWidth = document.body.clientWidth; return true; }; window.onresize = this.resize; }, imageMap = new ImageMap(document.getElementById('ImageMapsCom-image-maps-2014-02-21-023745'), document.getElementById('Image-Maps-Com-image-maps-2014-02-21-023745')); imageMap.resize(); return; } 

2. 然后在關閉</map>標記之前添加以下HTML：

 <div class="blinking"> <span class="beacon position1"></span> <span class="beacon position2"></span> <span class="beacon position3"></span> <span class="beacon position4"></span> <span class="beacon position5"></span> <span class="beacon position6"></span> <span class="beacon position7"></span> <span class="beacon position8"></span> <span class="beacon position9"></span> <span class="beacon position10"></span> </div> 

最后添加您的樣式CSS