IMG热点 - 启用可点击区域

Question

我需要启用上面的图像，以便点击3个部分。

我想将它保留为图像，我假设我需要使用jquery的热点（jquery是我首选的动态语言）。

有人可以指出我正确的方向。

THX

Answer 1

嗯，这是一种奇怪的解决方案，正如@Dan在评论中指出的那样，图像地图可能是更好的选择。

但至少这是一个jQuery解决方案：http://jsfiddle.net/zMXD8/1/

JavaScript的：

$('#menu').click(function (e) {
  var elements = 3;
  var element_height = $(this).height() / elements;
  var mouse_y = e.offsetY;

  for (var i = 1; i <= elements; i++) {
    if ((i - 1) * element_height < mouse_y && i * element_height > mouse_y) {
      alert("Clicked element #" + i);
      return;
    }
  }

  alert("Error in calculation");
});
​

只需将图片保存在img或与图片尺寸相同的容器中，然后id #menu复制粘贴上面的代码即可。