jquery - IMG 热点 - 启用可点击区域

Question

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

我想将其保留为图像，并且我假设我需要将热点与 jquery 一起使用（jquery 我首选的动态语言）。

有人可以用这个为我指出正确的方向吗？

谢谢

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