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定位。position
和 z-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:在图像映射区域上显示文本的主要内容,如果未能解决你的问题,请参考以下文章
如何创建带有“可悬停”区域的图像,在 jQuery 或 HTML5 中显示附加信息
jQuery maphilight 通过单击将区域设置为 alwaysOn