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コードをコピーして貼り付けます。