CSS + HTML自定义形状按钮

Question

我正在开发一款游戏，它会显示一个包含可点击国家/地区的地图。您可以点击国家这一事实令我头疼。我可以使用每个国家的图像并使用绝对定位并附加onclick事件，但是，我必须向每个用户传输100个图像，我将无法使用精灵和更多的东西。我可以搞乱javascript，但我猜它会是一个真正的混乱。有没有其他方法来实现这个？也许更简单，更优雅？

Answer 1

你可以使用SVG地图，维基百科有很多可用的：http://en.wikipedia.org/wiki/Wikipedia:Blank_maps

以下是SVG中可点击地理位置的示例：http://raphaeljs.com/australia.html

Answer 2

使用普通的旧HTML图像映射。这允许您将图像的某些部分指定为多边形，每个多边形都是不同的可点击链接。

（您可能听说过您不应该出于可访问性原因而使用图像映射的声明 - 这是无关紧要的，因为像CSS sprites这样的自己选择更糟用于此目的。）

Answer 3

您可以使用jVectorMap插件显示交互式世界地图。它基于矢量图形（SVG和VML），适用于所有浏览器。

Answer 4

让客户端加载一张图片并使用CSS sprites显示每个国家/地区。