如何使图像区域可点击

Question

这不是：“为我做所有工作！”有点问题。我只想知道你认为哪种方法适合这一挑战。

我有这张地图：

正如您可以通过蓝色标记看到的那样，我粗略地绘制了地图的一些选区/区域。 Theese地区我想作为链接。

但是我不太清楚如何把握这个挑战，因为所有的区域都有很奇怪的形状。

我看过cords,，但这似乎是我需要做的所有曲折的巨大工作。

如果我能在Photoshop中切片区域并将每个区域保存为.png并告诉我的页面忽略透明区域，我会很棒！但我认为这只是一厢情愿的想法。

我希望你们中的一个人有一个我忽略的建议。

Answer 1

试试这些 -

1. http://polymaps.org/
2. http://www.amcharts.com/javascript-maps/
3. Raphael JS

您可以尝试制作地图的SVG版本，然后根据您选择的库来实现其中一个库的点击。

这是使用Raphael JS执行此操作的一个教程 - http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map

Answer 2

为每个可点击区域制作图像，如下所示：

从页面注册img元素的click事件，这样：

var getAreaFromXY = function(x,y) {
// for each section colored map
// get pixel color on x,y (see http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image)
// if the color is red, that is the zone
};

$(".post-text img").click(function(e) {
  var area = getAreaFromXY(e.offsetX, e.offsetY);
});