0

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).

Viktor
  • 623
  • 4
  • 10
  • 25
  • This is very possible - look at the first example: http://www.w3schools.com/tags/tag_map.asp – spots Mar 11 '13 at 13:05

4 Answers4

5

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.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • you should maybe show how to prevent the default action for those areas that should not be clickable – Rune FS Mar 11 '13 at 13:20
  • this areas are prevented from getting the action. The problem is, smb. wants to mark a text, they are "evented" as clickers – Viktor Mar 11 '13 at 13:39
1

You can try to make a jQuery selector of all the element, and to slice for some

var selector = "#mydiv";
var numberOfElements = $(selector).find('*').length/2; //It's just an example

$(selector).find('*').slice(0, numberOfElements).click(function()  {
 [....]//do stuff
});
JoDev
  • 6,633
  • 1
  • 22
  • 37
  • so there i do slice this div in equal sized slices? nice idea! – Viktor Mar 11 '13 at 13:41
  • No, it was just an idea, and this just allow you to slice for a number of elements (HTML tags). It doesn't take care of element's offset. In my example, i search the middle of the HTML tree. – JoDev Mar 11 '13 at 14:09
0

You would probably need to make the whole div clickable but then by checking what coordinates was clicked figure out if you would like to handle the event or not.

Magnus Lindgren
  • 287
  • 1
  • 7
0

You can check the value of the offsetX and offsetY properties on the event object, and decide to do nothing if you don't like them.

Example.

Alternatively, if you need the click event to not fire at all, you could dynamically create additional transparent <div>s and place them partially in front of your existing element so that they obscure the parts which you don't want to respond to clicking.

Jon
  • 428,835
  • 81
  • 738
  • 806
  • dynamic div injection is bad practice for seo, isn't it? – Viktor Mar 11 '13 at 13:40
  • 1
    @Viktor: I have no idea, and since the divs we are talking about are going to be empty anyway I don't see how it would affect seo at all. – Jon Mar 11 '13 at 13:43