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

Question

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

我想将其保留为图像，并且我假设我需要将热点与 jquery(我首选的动态语言 jquery)结合使用。

谁能用这个给我指明正确的方向。

谢谢

Answer 1

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

但至少这里有一个 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 或与图片大小相同的容器中，然后拥有#menu 的id复制粘贴上面的代码。