Search code examples
jqueryhtmldictionaryareaclickable

jQuery or any: Possible to make only a part of a div clickable?

is it possible to make only a part of a div clickable -- like a clickmap/imagemap? May with jQuery? Hint: i don't want edit the html (misused template with 200 separate html files).

Solution

  • When your div is clicked, the event handler receives the event, so you can test the position of the click.

    If needed, you might want to use the clicked element position and size, using $(this).offset() , $(this).width() and $(this).height(). For example :

    $('mydivselector').click(function(e) {
     if (e.pageY > $(this).offset().top + 0.5*$(this).height()) {
          // bottom was clicked

     } else {
          // up of the div was clicked

     }
});

    If you want to prevent default action and event propagation, return false from the event handler.