9

我想知道如何为类似于此图像的地图进行标记和编码悬停效果。

当每个区域（或部分）被鼠标悬停/触摸/单击时，我需要更改它的颜色而不影响任何其他部分。每个部分的边界必须代表图像，而不是正方形。该解决方案不能使用画布，因为我正在处理的网站必须可以在旧版浏览器中使用（我个人很沮丧。）

理想情况下，我想用 CSS 来做到这一点，而不需要使用太多的 JavaScript 或大量的图像。有没有人这样做过？

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

编辑2：我可能会使用这个： http: //www.netzgesta.de/mapper/

4

4 回答 4

7

另一个自我回答...

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

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

我遇到的唯一问题：

  • 我希望地图背景是透明的。将填充设置为透明，同时允许该部分接受鼠标悬停在 Firefox 中有效，但在 IE 中，它失败了。相反，我选择用白色填充路径，然后将不透明度设置为 0.01。之后我复制了路径并且没有填充它来创建边框。
于 2010-09-24T15:40:18.427 回答
1

您可以使用 HTML<area>标记

于 2010-09-23T09:30:45.717 回答
0

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

于 2013-11-30T01:29:29.297 回答
0

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

编辑：我可以确认从 SVG->rapahel.js 的翻译可以工作，但 SVG 文件需要一些调整。对于我在 svg2raphael 中提供的示例 SVG 中看到的，这些文件是使用 Adob​​e 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 之外的风格！

于 2014-01-22T17:40:28.473 回答