不规则形状图像映射-不带画布、SVG或Javascript

---

如何使图像地图链接区域与网页中的背景图像如下？使用画布的唯一方法是什么？使用纯css和跨浏览器有什么方法可以做到这一点吗？

使用已定义的

坐标的
属性将完成这项工作。一开始它可能看起来很复杂，但是一旦您理解了形状构造，它就很容易了。这是一个示例JSFIDLE:>>>单击此处感谢回复！！！通常使用什么工具创建区域坐标编号？仅键入html？？但是如果这个区域的形状是复杂的，你可以看到，我没有使用任何工具。但是，如果您不习惯自己确定顶点，可以使用Dreamweaver等程序为您构建这些贴图。但是，如果您接受了通过反复试验确定坐标的初始挑战，您不仅会对图像贴图有更好的理解，而且会帮助您了解其他样式的定位，例如画布和SVG映射。我只是尝试使用SVG，但我仍然无法获得它。如何制作像我绘制的向量这样的区域，只能将鼠标悬停在上面，然后单击我在其他帖子中回复了你-
<div class="imagemap">
    <img src="http://i.imgur.com/T7OrXYW.png" alt="The Map" usemap="#mymap" />
    <map name="mymap" id="mymap">
        <area shape="poly" coords="6, 10, 280, 10, 144,157" href="http://www.aol.com" />
        <area shape="poly" coords="7, 20, 144, 167, 144, 288, 6, 288" href="http://www.yahoo.com" />
    </map>
</div>

.imagemap img {
    width: 300px;
    height: 300px;
    border: 1px solid blue;
}