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

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

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

这是一个有效的例子