HTML，jQuery：在图像地图区域显示文字 [英] HTML, jQuery : Show text over area of image-map
问题描述
我有一个像图：
< img src =planets.gifwidth =145 height =126alt =行星usemap =＃planetmap/>
< area shape =rectcoords =0,0,82,126href =sun.htmalt =Sun/>
< area shape =circlecoords =90,58,3href =mercur.htmalt =Mercury/>
< area shape =circlecoords =124,58,8href =venus.htmalt =Venus/>
< / map>
我使用jQuery将span扩展到区域，但没有机会显示区域上的任何内容。
有没有什么方法可以显示区域上的文本，例如工具提示，但没有鼠标悬停，页面加载时文本超出区域？
<
当您添加跨度时，请使用以下内容：
（未测试）
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'}）
我倾向于根据上下文使用这些方法。
以下是一个工作示例
I have an image-map like:
<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>
I use jQuery to append span to area but no chance to show any thing over area.
Is there any way to show text over area, like tooltip, but without mouse over, text over area when page loaded?
Thanks for any help.
When you add the span, use something such as:
(Not tested)
jQuery('map_div').append('span').text('Mercury').css({position:'absolute', left:'10px',top:'10px',z-index:'1'})
You may also need to apply z-index to any divs which will be underneath these spans
Another alternative would be to set a relative positioned div with appropriate margins:
jQuery('map_div').append('span').text('Mercury').css({position:'relative', margin-left:'-20px',margin-top:'-20px'})
I tend to use either these methods depending on the context.
Here is a working example
这篇关于HTML，jQuery：在图像地图区域显示文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
