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

我的目标是在屏幕上显示图像，并且当用户将鼠标悬停在各种多边形上时，它们将在它们所在的多边形上覆盖蓝色覆盖。制作叠加图像映射的更好方法？

拿这个图像为例：

我想象写这样的代码：

<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中创建这些地图和图像覆盖？

来源

2016-05-23 Jrud

您可以参考https://css-tricks.com/examples/ShapesOfCSS/并使用css创建各种形状 – brk

好主意，但我应该清楚。我不会总是有完美的几何形状。有没有办法用点来定义一个poly？ – Jrud

我会说你对SVG更好 - 无论是涉及到浏览器支持还是易用性（从开发人员的角度来看）。甚至可用性方面，因为你可以直接使用put链接，https ：//www.w3.org/wiki/SVG_Links – CBroe

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

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

使用任何可以处理矢量图形/ SVG的半路体面图形程序/编辑器（如Inkscape或Illustrator）应该可以获得形状。这些人往往会在他们保存的SVG文件中包含大量的臃肿内容，因此您可能希望在将SVG放入网络之前将其缩小/缩小 - https://jakearchibald.github.io/svgomg/是一款易于使用的在线工具（可用于更频繁的使用）

来源

2016-05-23 21:57:36 CBroe

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

回答

相关问题