Question

我有一个像：

的图像映射

<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添加到区域，但没有机会在区域上显示任何内容。

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

感谢您的帮助。

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

我倾向于使用这些方法，具体取决于上下文。

这是一个有效的example

Answer 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。

Answer 3

使用Jquery库

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: