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

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

理想情况下,我想用CSS做这个,而不使用太多的JavaScript或大量的图像.有没有人这样做过？

编辑：我知道人们建议< area> tag,但是AFAIK,它不接受：hover伪类.

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

解决方法:

另一个自我答案……

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

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

我遇到的唯一问题：

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