IMG熱點 - 啓用可點擊區域

Question

我需要啓用上面的圖像，因此3個部分可以點擊。

我想保留它作爲一個圖像，我想我需要使用熱點與jQuery（jQuery我的首選動態語言）。

有人可以用這個指向正確的方向。

THX

Answer 1

好了，這是怎樣的一個奇怪的解決方案，並作爲@丹在他的評論中指出，圖像映射可能是一個更好的選擇。

但至少在這裏是一個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複製粘貼上面的代碼。