如何使html 始终可见,而不仅仅是关注?
似乎 应该 像这样简单:
的HTML:
<img src="image.png" width="100" height="100" usemap="#Map" /> <map name="Map" id="Map"> <area shape="circle" coords="50,50,50" href="#" alt="circle" /> </map>
CSS:
area {border: 1px solid red}
无论我做什么,似乎我根本都无法影响某个区域的样式,它看起来确实不受CSS影响。有任何想法吗?另外,还有其他无法使用样式标记的示例吗?
您可能会在这里发现jQuery插件MapHilight)。
我建议使用带有绝对链接的div。原因是,这将很好地降低性能,并将所有选项显示为链接列表。图片地图不会那么友好。此外,采用更清洁,更现代的做法,这种替代方法将产生相同的结果。
#myImage { position:relative; width:640px; height:100px; background-image:url("bkg.jpg"); } a.apples { display:block; position:absolute; top:0; left:0; width:100px; height:100px; border:1px solid red; } a.taters { display:block; position:absolute; top:0; left:200px; width:25px; height:25px; border:1px dotted orange; } #myImage a span { display:none; }
-
<div id="myImage"> <ul> <li><a href="page1.html" class="apples"><span>Apples</span></a></li> <li><a href="page2.html" class="taters"><span>Taters</span></a></li> </ul> </div>