可见区域标签？

Question

如何使html <area />始终可见,而不仅仅是焦点？

似乎它应该像这样简单:

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免疫.有任何想法吗？此外,任何其他不可样式标签的例子？

Answer 1

jQuery插件,MapHilight:

您可能会在这里找到jQuery插件MapHilight(死链接!!!).

• 美国演示地图(死链接!!!)

新链接:https://github.com/kemayo/maphilight

新演示:https://home.ctw.utwente.nl/slootenvanf/wp-content/uploads/examples/archive/jquery_plugins/imagemap/

HTML/CSS替代方案

我建议使用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>

Answer 2

该area标签只是定义了用户可以通过点击空间,还有就是它没有可视化表示,所以你不能真正使用CSS样式它.我喜欢你前往的地方但不幸的是你可能需要使用javascript在图像地图的顶部覆盖透明图像来完成你想要做的事情.

Answer 3

所以你的问题就回家了.我希望能够使用区域标签做类似的事情来获得感兴趣区域以外的方形以外的漂亮小"形状".所以我做了一些研究,这是我发现的:

http://www.netzgesta.de/mapper/

看起来不会100%做你想要的,但也许它是一个起点.