制作叠加图像地图的更好方法是什么？

Question

我的目标是在屏幕上显示一个图像，当用户将鼠标悬停在各种多边形上时，他们将在他们将鼠标悬停在其上的多边形上获得蓝色叠加。

以此图片为例：

我设想编写这样的代码：

<img src="planets.gif" width="145" height="126" usemap="#polymap">
<img id="StarOverlay" src="StarOverlay.png" style="position:absolute;top:30px;left:59px;display:none;"/>

<map name="polymap">
    <area id="star" shape="poly" coords="0,0,82,126"  alt="Star">
    <area shape="circle" coords="90,58,3"  alt="Circle">
    <area shape="Rectangle" coords="124,58,8"  alt="Square">
    <area shape="Rectangle" coords="124,58,8"  alt="Square">
</map>

$(document).ready(function () {
    $('#star').hover(function () {
        $('#StarOverlay').show();
    }, function () {
        $('#StarOverlay').hide();
    });
});

但是，我需要为每个叠加制作非常详细的叠加层，并对映射采取非常特殊的措施。我需要做15张图像，每张图像超过40个映射，所以这将非常耗时（我估计它需要一个月或更长时间）。

使用HTML5是否有更好的方法？或任何其他HTML功能来实现这一点，而无需在photoshop中构建这些地图和图像叠加？

Answer 1

我说你最好使用SVG [而不是CSS形状] - 无论是在浏览器支持方面，还是在易用性方面（从开发人员的角度来看）。甚至可能可用性方面，因为您可以直接将链接放入其中（请参阅fe https://www.w3.org/wiki/SVG_Links）

悬停效果也可以直接在SVG中处理，只要您通过svg元素嵌入它，这样就可以在主文档的样式表中轻松控制它。

使用可以处理矢量图形/ SVG的任何中途体面的图形程序/编辑器，如inkscape或illustrator，可以获得开始的形状。这些往往会在他们保存的SVG文件中包含大量膨胀，因此您可能希望在将其放入网络之前缩小/缩小SVG - https://jakearchibald.github.io/svgomg/是一个易于使用的在线工具（更频繁）使用你可以查看它所基于的命令行工具。）