可见区域标签？

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免疫。 有任何想法吗？还有其他无法应用样式的标签的例子吗？

- graphicdivine

---

我提供了一种优雅降级的替代方案，如果未来需要进一步修改，应该能够提供相同的视觉效果。 - Sampson

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>

- Sampson

---

这如何产生相同的结果？请注意原始帖子中的 shape="circle"。 - Josef Pfleger

Josef，对于最终用户来说，在功能上不会有太大的区别。 - Sampson

或许对于最终用户来说并没有太大区别，但如果这是一个项目要求，那么shape="circle"是重要的，不是吗？此外，对于可能对屏幕阅读器有用的项目，不应该使用display:none;。而应该使用position: absolute; visibility:hidden;。这样可以使元素脱离文档流，防止它破坏布局，并且不会被看到，除非是被display:none;隐藏的屏幕阅读器读取到了 - Kevin Peno

链接已失效，对于其他发现此问题的人。 - Seiyria

回答问题不够充分。 - Urasquirrel

Answer 2

area 标签只是定义用户可以点击的区域，它没有可视化的表示，因此你不能真正使用 CSS 对其进行样式设置。我喜欢你的想法，但不幸的是，你可能需要使用 JavaScript 在图像映射上叠加一个透明的图像来实现你想要的效果。

- Shawn Steward

---

谢谢你的回答，我会尝试使用JavaScript/图片方法。令人沮丧的是，这个区域确实有一些视觉表示。默认情况下，大多数浏览器将在焦点上呈现虚线轮廓，但这也是不可改变的。 - graphicdivine

这是答案。 - Urasquirrel

Answer 3

这个问题触及了我的痛处。我想使用区域标签来获取除正方形以外的漂亮小“形状”作为感兴趣的区域。因此，我进行了一些研究，以下是我找到的内容：

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

看起来它可能不能完全满足您的需求，但或许可以作为一个起点。

- Kevin Peno

Answer 4

还有另一种选择。您可以编写SVG代码，然后通过设置fill:green; fill-opacity: 1; 来查看形状。

<svg height="300" width="200">
  <a xlink:href="http://stackoverflow.com/">
    <ellipse cx="100" cy="150" rx="100" ry="150" style="fill:white; stroke:none;fill-opacity: 0" />
  </a>
</svg>

- Eskil Mjelva Saatvedt

---

这也很有用，因为它允许与图像一起进行缩放。 - sbgib

Answer 5

要是这么简单就好了。

如果你想绘制简单的形状，你可以使用HTML中的<canvas>元素来实现，这也是像flot这样的库所使用的（IE需要使用excanvas模拟器）。

尽管还是需要相当数量的Javascript代码，但与搞弄覆盖图像相比，它可能更容易/更有效，特别是如果你的形状大小不是静态的。这里有一个非常好的教程（链接）。

- Aaronaught