gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:50:14 26 4
gpt4 key购买 nike

使用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>

最佳答案

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

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

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

关于javascript - 使用 JQuery 或其他工具将 HTML 代码添加到 Image Map,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22450990/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com