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

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

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

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

谢谢你的帮助。

Answer 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'}) 

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

这是一个有效的例子

Answer 2

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

javascript看起来像这样：

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

它效果很好，并且具有附加价值，可以在各种尺寸的显示器和分辨率下查看时自动缩放图像映射坐标。

但是， 未发布的1.2.7版本增加了ToolTipfunction的重要改进 – 请查看此示例 。

Answer 3

使用Jquery库