CODEWITHSUNDEEP
jqueryhtmlcss
Adam
Adam

Reputation: 20892

IMG Hotspots - Enable Clickable areas

enter image description here

I need to enable the above image so the 3 sections can be clicked.

I want to keep it as an image and I assume I need to use hotspots with jquery (jquery my preferred dynamic language).

can someone point me in the right direction with this one.

thx

Upvotes: 2

Views: 299

Answers (1)

ThoKra
ThoKra

Reputation: 3029

Well, this is kind of a weird solution, and as @Dan notes in his comment, Image maps might be a better option.

But at least here is a jQuery solution: 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");
});
​

Just save your image in a img or a container of the same size as the image, and then have an id of #menu to copy paste the code above.

Upvotes: 1

Related Questions