HTML，jQuery：在图像映射区域上显示文本答案

【问题标题】：HTML, jQuery : Show text over area of image-mapHTML，jQuery：在图像映射区域上显示文本
【发布时间】：2012-02-19 09:59:04
【问题描述】：

我有一个像这样的图像映射：

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

我使用 jQuery 将 span 附加到区域，但没有机会在区域上显示任何东西。

有没有办法在区域上显示文本，如工具提示，但没有鼠标悬停，页面加载时文本在区域上？

感谢您的帮助。

【问题讨论】：

看看css定位。 position 和 z-index 是您要查看的属性。
相信你会在这里找到答案：stackoverflow.com/questions/745110/…
@Petr Marek ：我都使用它们，但问题是：当将 span 附加到区域时，没有什么可显示的。
@Raul Marengo ：谢谢，但他们都使用悬停，我需要在没有鼠标悬停的情况下显示文本
@NuLLeR 您可能可以使用相同的方法，只是在加载时触发它而不是鼠标悬停？

标签： jquery html imagemap

【解决方案1】：

添加跨度时，请使用以下内容：

（未测试）

jQuery('map_div').append('span').text('Mercury').css({position:'absolute', left:'10px',top:'10px',z-index:'1'})

您可能还需要将 z-index 应用于这些跨度下方的任何 div

另一种选择是设置具有适当边距的相对定位 div：

jQuery('map_div').append('span').text('Mercury').css({position:'relative', margin-left:'-20px',margin-top:'-20px'})

我倾向于根据上下文使用这两种方法。

这是一个有效的example

【讨论】：

我不确定它在使用 jsfiddle 时是否特定于浏览器。我正在使用 Firefox，当我加载它时，我可以在图像顶部看到 MERCURY 一词。对你来说不是这样显示吗？
在 Firefox 上测试过，没关系。

【解决方案2】：

我使用 ImageMapper jQuery 插件来解决这个问题。下面是一些示例代码：

<div>
<img id="ohiomap" src="images/map.png" border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="poly" coords="33,140,69,115,85,107,98,97" href="#" name="northwest" />
    <area shape="poly" coords="75,98,76,234,287,65,43,97" href="#" name="centralwest" />
</map>
</div>

javascript 看起来像这样：

var image = $('#ohiomap');
image.mapster({
fillOpacity: 0.1,
fillColor: "d42e16",
isSelectable: false,
singleSelect: true,
mapKey: 'name',
listKey: 'name',
toolTipContainer: '<div style="width:100px; height:100px; color:#BBBBBB"> </div>',       
showToolTip: true,
toolTipClose: ["area-mouseout"],
areas: [{
        key: "northwest",
        toolTip: nwTooltip,
    },        
    {
        key: "centralwest",
        toolTip: cwTooltip
    }]
})
.mapster('tooltip','northwest');

它工作得很好，并且具有附加价值，当在各种尺寸的显示器和分辨率上查看时，它会自动缩放您的图像地图坐标。

不过，unreleased version 1.2.7 对 ToolTip 功能进行了重要改进 -- check out this example。

【讨论】：

【解决方案3】：

使用 Jquery 库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script>
    $(function() { 
    $(document).tooltip({position: {at: "left-275 top-375",of: "area"}});
    });
</script>

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"/>
<map name="planetmap">
   <area shape="rect" title= "Sun" coords="0,0,82,126" href="sun.htm" alt="Sun"/>
   <area shape="circle" title="Mercury" coords="90,58,3" href="mercur.htm" alt="Mercury" />
   <area shape="circle" title="Venus" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

【讨论】：