Html 可见区域标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1906734/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Visible Area tag?
提问by graphicdivine
How do I make an html < area /> visible at all times, not just on focus?
如何使 html < area /> 始终可见，而不仅仅是焦点？
Seems it shouldbe as simple as this:
似乎应该像这样简单：
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:
css：
area {border: 1px solid red}
No matter what I do, it seems I cannot affect the styling of an area at all, it genuinely appears immune to css. Any ideas? Also, any other examples of un-style-able tags?
无论我做什么，似乎我都无法影响一个区域的样式，它确实对 css 免疫。有任何想法吗？另外，还有其他不可样式标签的例子吗？
回答by Sampson
jQuery Plugin, MapHilight:
jQuery 插件，MapHilight：
You might find the jQuery plugin MapHilight(dead link!!!) to be of interest here.
您可能会发现jQuery 插件 MapHilight（死链接！！！）在这里很有趣。
- Map of the United States Demo(dead link!!!)
- 美国演示地图（死链接！！！）
New link: https://github.com/kemayo/maphilight
新链接：https: //github.com/kemayo/maphilight
New demo: https://home.ctw.utwente.nl/slootenvanf/wp-content/uploads/examples/archive/jquery_plugins/imagemap/
新演示：https: //home.ctw.utwente.nl/slootenvanf/wp-content/uploads/examples/archive/jquery_plugins/imagemap/
HTML/CSS Alternative
HTML/CSS 替代品
I would suggest using a div, with absolute links within. The reason being, this will degrade very nicely and show all of the options as a list of links. Image maps won't be so friendly. Furthermore, this alternative will deliver the same results, with cleaner and more modern practices.
我建议使用带有绝对链接的 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>
回答by Shawn Steward
The areatag just defines space in which the user can click, there is no visual representation of it so you can't really use CSS to style it. I like where you're headed but unfortunately you will probably need to use javascript to overlay a transparent image over the top of your image map to accomplish what you're trying to do.
该area标签只是定义了用户可以通过点击空间，还有就是它没有可视化表示，所以你不能真正使用CSS样式它。我喜欢你要去的地方，但不幸的是，你可能需要使用 javascript 在图像地图的顶部覆盖一个透明图像来完成你想要做的事情。
回答by Kevin Peno
So your question hit home for me. I'd love to be able to do something similar using area tags to get nice little "shapes" other than square for areas of interest. So I did a little research and here's what I found:
所以你的问题对我来说很重要。我希望能够使用区域标签做类似的事情，以获得除感兴趣区域的正方形以外的漂亮小“形状”。所以我做了一些研究，这是我发现的：
http://www.netzgesta.de/mapper/
http://www.netzgesta.de/mapper/
Doesn't look like it will 100% do what you want, but maybe it is a starting point.
看起来它不会 100% 做你想做的事，但也许它是一个起点。
回答by Aaronaught
If only it were so easy.
要是这么容易就好了。
If you want to draw simple shapes, you might be able to get there using the HTML <canvas> element, which is what libraries like flot use (IE requires the excanvas emulator).
如果你想绘制简单的形状，你可能可以使用 HTML <canvas> 元素来实现，这是像 flot 这样的库使用的（IE 需要 excanvas 模拟器）。
It'll still require a fair amount of Javascript, but it might be easier/more effective than messing around with overlay images, especially if the sizes of your shapes aren't static. There's a pretty good tutorial here.
它仍然需要大量的 Javascript，但它可能比乱用覆盖图像更容易/更有效，特别是如果你的形状的大小不是静态的。有一个很好的教程在这里。
回答by Eskil Mjelva Saatvedt
There is another option. You can write an SVG. Then you can see the shape by setting fill:green; fill-opacity: 1;
还有另一种选择。你可以写一个SVG。然后你可以通过设置fill:green;看到形状。填充不透明度：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>
