Question

如何制作html＆lt; area /＆gt;在任何时候都可见，而不仅仅是焦点？

似乎应该就像这样简单：

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 plugin MapHilight（死链接!!!）。

Map of the United States Demo（死链接!!!）

新链接：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％做你想做的事，但也许这是一个起点。

Answer 4

如果只是这么容易的话。

如果你想绘制简单的形状，你可以使用HTML＆lt; canvas＆gt;来实现目标。元素，这就是像flot一样的库（IE需要excanvas模拟器）。

它仍然需要相当数量的Javascript，但它可能比使用叠加图像更容易/更有效，特别是如果形状的大小不是静态的。有一个非常好的教程here。

Answer 5

还有另一种选择。你可以写一个SVG。然后你可以通过设置填充来看到形状：绿色;填充不透明度：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>

可见区域标签？

5 个答案:

jQuery插件，MapHilight：

HTML / CSS替代