制作叠加图像地图的更好方法?
Better way to make a overlay-image-map?
我的 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 中构建这些地图和图像叠加层?
我想说你最好使用 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/ 是一个易于使用的在线工具(对于更频繁的使用你可以看看它基于的命令行工具。)
我的 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 中构建这些地图和图像叠加层?
我想说你最好使用 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/ 是一个易于使用的在线工具(对于更频繁的使用你可以看看它基于的命令行工具。)