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

只获取area元素的偏移量并在相同的偏移量上添加span：

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

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

Answer 2

以下是解决方案：

首先，我包含调整图像大小的脚本，以及调整窗口大小的区域坐标。

<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;
}

然后在关闭</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

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

2 个答案: