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

Question

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

以此图为例：

我设想编写这样的代码：

<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 多个映射，所以这将非常耗时（我估计需要一个月或更长时间）。

有没有更好的方法使用 say HTML5？或任何其他 HTML 功能来完成此操作而无需在 photoshop 中构建这些地图和图像叠加层？

Answer 1

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

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

使用任何可以处理矢量 graphics/SVG 的中等体面的图形 program/editor 应该可以开始绘制形状，例如 inkscape 或 illustrator。不过，它们往往会在保存的 SVG 文件中包含大量膨胀内容，因此您可能希望 minify/shrink 在将 SVG 放到网络上之前对其进行处理 - https://jakearchibald.github.io/svgomg/ 是一个易于使用的在线工具（对于更频繁的使用你可以看看它基于的命令行工具。）

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

Better way to make a overlay-image-map?

javascript

jquery

html

imagemap