javascript - 制作覆盖图像 map 的更好方法？

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 中构建这些 map 和图像叠加层？

Answer 1

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

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

使用任何可以处理矢量图形/SVG 的中等图形程序/编辑器(例如 inkscape 或 illustrator)都可以开始绘制形状。不过，这些文件往往会在保存的 SVG 文件中包含大量内容，因此您可能需要在将 SVG 放到网络上之前缩小/缩小它 - https://jakearchibald.github.io/svgomg/是一个易于使用的在线工具(为了更频繁地使用，您可以查看它所基于的命令行工具。)