如何在图像地图上为不规则形状创建鼠标悬停效果答案

【问题标题】：How to create mouse hover effect to irregular shape on image map如何在图像地图上为不规则形状创建鼠标悬停效果
【发布时间】：2016-07-13 05:10:56
【问题描述】：

如何在图像地图上为不规则形状创建鼠标悬停效果？不规则的形状可以很复杂，不是多边形/矩形/三角形/圆形，而是灯笼或动物形状。这可能吗？

【问题讨论】：

您的意思是要突出显示这个形状吗？或者只是鼠标悬停会出现这种形状？
这可能有用：stackoverflow.com/questions/12661124/…
@MoshFeu 是的，我希望突出不规则形状的轮廓
@phhelpsiv 回答你的问题了吗？

标签： html css

【解决方案1】：

您可以尝试使用 SVG 矢量图像来选择特定的不规则形状。

CSS 看起来像：

.shape:hover {
    fill: green;
}

和 html SVG：

<svg version="1.0" width="291.000000pt" height="300.000000pt">

<g class="rabbit"fill="#000000" stroke="none"  transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)">

<path .../>

示例：http://codepen.io/phelpsiv/pen/rLYvrp

【讨论】：

+1 用于 SVG。 Adobe Illustrator 非常适合自动创建 SVG。如果您正在使用特定的图像映射，您可以在 Illustrator 中对其进行描摹，导出 SVG，然后使用此方法使任何给定形状成为悬停状态。（也可以让标准状态透明）
这是个好主意，但 on image map 呢？
据我所知，我能找到的最好的答案是 Harshad Hirapara 答案如下。

【解决方案2】：

根据坐标尝试：

<map id="honeycomb" name="honeycomb">
    <area shape="poly" alt="" title="" coords="493,23,572,65,573,159,491,204,415,158,415,67" href="" target="" />
    <area shape="poly" alt="" title="" coords="651,22,732,66,732,158,652,203,574,158,573,66" href="" target="" />
    ...
</map>

演示： jsFiddle

【讨论】：