Two triangular clickable area within a square

Question

Basically I want to split a square div diagonally in two resulting in two triangles.

Each triangle has to respond to the hover event.

This is what I have so far but the problem is: if you go from one corner of the div straight to the opposite corner it doesn't re-trigger the hover event since the event is applied to the div element and not the define triangle area within.

I'm open to any suggestions, I don't even mind if I need to approach the problem from a different angle all together. There's got to be an easier solution, at least I hope!

The HTML

<div class="day_box">
</div>

The CSS

 html, body { margin: 0; }

.day_box, .upper_left_hover, .lower_right_hover, .full_day {
  background: url(/images/corner-sprites.png);
  border: 1px solid black;
  width: 25px;
  height: 25px;
  float: left;
  margin: 100px;
}

.upper_left_hover { background-position: 75px 0; }
.lower_right_hover { background-position: 50px 0; }
.full_day { background-position: 25px 0; }

The JS

  $(".day_box").hover(function(event){
    var offset = $(this).offset();
    var h = $(this).height() + offset.top;
    if((h - event.pageY)>(event.pageX - offset.left)) {
      console.log("Upper left");
      $(this).toggleClass("upper_left_hover");
    } else {
      console.log("Lower right");
      $(this).toggleClass("lower_right_hover");
    }
  });

The Fiddle: http://jsfiddle.net/zsay6/

entropid · Accepted Answer · 2012-01-27T02:22:11.493

2

You can use the mousemove event like this (adding mouseout to remove both of the classes when you leave the square):

  $(".day_box").mousemove(function(event){
    var offset = $(this).offset();
    var h = $(this).height() + offset.top;
    if((h - event.pageY)>(event.pageX - offset.left)) {
      console.log("Upper left");
      $(this).removeClass("lower_right_hover");
      $(this).addClass("upper_left_hover");
    } else if ((h - event.pageY)<(event.pageX - offset.left)) {
      console.log("Lower right");
      $(this).removeClass("upper_left_hover");
      $(this).addClass("lower_right_hover");
    }
  }).mouseout(function(event)
  {
     $(this).removeClass("lower_right_hover upper_left_hover");
  });

edited Jan 27 '12 at 02:22

answered Jan 27 '12 at 02:16

entropid

6,130
5
32
45

1

Thanks Entropy, it just all seems so over the top for what should essentially be a common enough task. Here's the final code snippet: http://jsfiddle.net/zsay6/19/ – EasyCo Jan 27 '12 at 02:27
1

Well, I think you don't have any alternative: following the movements pixel by pixel is actually the only way to detect when it moves from one triangle to the other one. `hover` is triggered just once, when you enter the area, just like `mouseenter` or `mouseover` events. You can't keep checking the position with those event handlers. – entropid Jan 27 '12 at 02:30

score 2 · Answer 2 · edited May 23 '17 at 11:53

2

http://jsfiddle.net/zsay6/14/

I altered your fiddle to produce the effect you wanted... and I didn't clean it up at all (was just fiddling... haha)

Using the right-triangle formula (here), I set the given style you set up in your original fiddle. It also throws up some values in a debugging div so you can see it in action a little more clearly.

edited May 23 '17 at 11:53

Community

1
1

answered Jan 27 '12 at 02:23

Jim H.

5,539
1
24
23

score 0 · Answer 3 · answered Jul 09 '13 at 18:05

0

You can also use HTML map areas for that purpose:

http://www.w3schools.com/tags/tag_map.asp

On hover, change the background of the element to which the usemap is applied.

answered Jul 09 '13 at 18:05

Luis Evrythng

1,085
10
15

Two triangular clickable area within a square

3 Answers3

Linked