在CSS中悬停对不规则多边形的影响

Question

我想知道如何为类似于this image的地图标记和编码悬停效果。

当每个区（或部分）被鼠标悬停/触摸/点击时，我需要更改它的颜色而不影响任何其他部分。每个部分的边界必须代表图像，不应该是正方形。该解决方案无法使用canvas，因为我正在使用的网站必须可以在旧浏览器中使用（我个人已经内脏了。）

理想情况下，我希望在不使用过多JavaScript或大量图像的情况下使用CSS。有人曾经这样做过吗？

编辑：我知道人们建议<area>标签，但是AFAIK，它不接受：hover伪类。

编辑2：我可以使用它：http://www.netzgesta.de/mapper/

Answer 1

另一个自我回答......

几个月前，我遇到了一个名为Raphael JS的图书馆 - http://raphaeljs.com/。对于那些不熟悉它的人来说，它首先是一个SVG DOM库。如果您对SVG了解一两件事，您就会知道IE不支持它，但它确实支持VML。拉斐尔也迎合了这一点。棒极了吧？

无论如何，我最终将地图的AI文件保存为SVG文件并将路径导入JSON块，基本上与此代码完全相同：http://raphaeljs.com/australia.html

我遇到的唯一问题是：

• 我希望地图背景透明。将填充设置为透明，同时允许部分接受鼠标悬停在Firefox中工作，但在IE中，它失败了。我改为选择用白色填充路径，然后将不透明度设置为0.01。之后我复制了路径并没有填充它来创建边框。

Answer 2

您可以使用HTML <area>代码

Answer 3

如果你使用jQuery，你可以使用maphilight插件。记录在http://davidlynch.org/projects/maphilight/docs/，可从github https://github.com/kemayo/maphilight

获取

Answer 4

我看到这里的问题是什么：让我们说一个世界地图，通常的方式是相当大的负担。如果我做对了，你想要的是拥有一个领土地图图像，并设置悬停效果，使悬停区域与国家边界完全匹配。 SVG可以用于地图（绘图部分已经完成），但问题是如何使用SVG地图坐标生成 HTML区域地图。有一个解决方案（我已经尝试过了，至少在提供的演示中看起来很好），它使用PHP将SVG转换为Raphael（生成coords）。但是你再次需要raphael.js ......好吧，如果你改变主意：https://github.com/atirip/svg2raphael。如果你不熟悉拉斐尔，它需要一段时间来适应它，文档对我来说并不是那么好 - 。

编辑：我可以确认SVG-> rapahel.js的翻译有效，但SVG文件需要进行一些调整。对于我在svg2raphael中提供的示例SVG中看到的，文件是使用Adobe Illustrator制作的。我尝试使用Inkscape中的SVG（普通版）并且它无法正常工作，但我可以设法解决问题，例如：

1. svg2raphael不会翻译Inkscape生成的<path style="fill:#ff0000" ...></path>（将设置fill =“none”!!!所以结果是不可见的，但会正确翻译<path fill="#ff0000" ...></path>似乎它会忽略style =内的所有内容“”。
2. svg2raphael误读了Inkscape SVG中的对齐，因此您需要在Inkscape中移动插图或使用文本编辑器编辑SVG文件并将M值更改为M0,0。
3. svg2raphael可以翻译多个svg元素，但会查看Inkscape生成的主标签以对齐插图组，有时整个插图会远离渲染区域而你什么也看不到。希望这有帮助！

编辑2：您可以使用Inkscape的style =“”来创建适用于SVG的CSS规则，这样可以保持SVG / Raphael以外的风格！