互动世界地图，突出鼠标悬停国家 [英] Interactive World Map, highlight countries on mouseover

问题描述

我需要在网站的首页上创建一个交互式世界地图，视图门户将大约为650x200像素。交互性将包括以下内容，鼠标覆盖一个国家将突出显示（例如，国家将填充红色）该国家和显示国家的名称（最好是div中的文本），我也将链接突出显示事件，选中时会突出显示一个国家。

I need to create an interactive world map on the front page of a site, the view portal will be about 650x200 pixels. The interactivity would include the following, mouse-over a country would highlight (the countries are will literally be filled with "red" for example) that country and display the countries' name (preferably text in a div), I will also be linking the highlighting event with a that will highlight a country when selected.

我很难找到合适的解决方案，我拒绝使用或学习专有技术，如闪光所以它不是一个选择。我创建了一个使用openlayers和自定义地图图像的简单模型，但国家的标记在IE6中加载速度太慢。

I am having a difficult time finding a suitable solution, I refuse to use or learn a proprietry technology such as flash so it is not an option. I created a simple mockup using openlayers and a custom map image but the countries' markers load too slowly in IE6.

另外svg看起来太大了，因为我试图使用RaphaelJS ，但是当我意识到世界地图数据是1.2mb这对于一个网站的首页是完全不可接受的时候放弃了它。

Also svg seems too large, as I tried to use RaphaelJS, but abondoned it when I realised the world map data is 1.2mb which is totally un acceptable for the front page of a site..

我真的很茫然我将如何做到这一点，我的最后一招是手动创建250多个（无论有多少国家）png并将鼠标悬停事件应用到图像中的热点......但这可能也是一个死胡同......拼命寻求解决方案，任何有用的评论将不胜感激！

I am really at a loss on how I am going to do this, my last resort is to manually create 250+ (however many countries there are) pngs and apply mouseover events to hotspots in the image... but this is probably going to be a dead end too.. desperately seeking a solution, any helpful comments will be appreciated!

推荐答案

我最终与RaphaelJS达成和解，从svg导入所有路径在inkscape中，效果非常好！

I finaly settled with RaphaelJS, importing all the paths from an svg in inkscape, works amazingly well!

这篇关于互动世界地图，突出鼠标悬停国家的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！