HTML,jQuery:在图像映射区域上显示文本

Posted

技术标签:

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

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

<img src ="planets.gif"    usemap ="#planetmap" />

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

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

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

感谢您的帮助。

【问题讨论】:

看看css定位。 positionz-index 是您要查看的属性。 相信你会在这里找到答案:***.com/questions/745110/… @Petr Marek :我都使用它们,但问题是:当将 span 附加到区域时,没有什么可显示的。 @Raul Marengo :谢谢,但他们都使用悬停,我需要在没有鼠标悬停的情况下显示文本 @NuLLeR 您可能可以使用相同的方法,只是在加载时触发它而不是鼠标悬停? 【参考方案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"    usemap="#planetmap"/>
<map name="planetmap">
   <area shape="rect" title= "Sun" coords="0,0,82,126" href="sun.htm" />
   <area shape="circle" title="Mercury" coords="90,58,3" href="mercur.htm"  />
   <area shape="circle" title="Venus" coords="124,58,8" href="venus.htm"  />
</map> 

【讨论】:

以上是关于HTML,jQuery:在图像映射区域上显示文本的主要内容,如果未能解决你的问题,请参考以下文章

div、背景图像和图像映射

如何创建带有“可悬停”区域的图像,在 jQuery 或 HTML5 中显示附加信息

jQuery maphilight 通过单击将区域设置为 alwaysOn

在图像地图中突出显示地图亮点区域

在 iframe 上滑动,传递点击事件,并且 elementFromPoint 在图像映射区域上返回 null

jQuery - 选择覆盖在图像上的不可见文本,ala GMail PDF 查看器