Creating Diagonal Link Areas (href)

Question

Let's say you have 50px by 50px div / box

<div style="width: 50px; height: 50px;"> </div> 

In this field you want to have two links that are divided in half diagonally so

You can use the old map / area HTML code, but this is undesirable since jquery doesn’t play very well with it ... but that's a different story.

I don’t have enough ideas and I will be very grateful for the help / understanding of how you approach this situation.

Answer 1

It is very simple with jQuery, especially since it is a simple y = x split:

 $("#clickMe").click(function(event){ console.log(event); if(event.offsetX>event.offsetY){ parent.window.location="http://bing.com"; }else{ parent.window.location = "http://google.com"; } }); 

What we do is define the area in the div based on the function y = x (any function will work). By the way, I use parent for jsfiddle just because the code works in an iframe.

http://jsfiddle.net/JM6JC/4/

[ UPDATE ]

Well, you asked how to make a line going in the opposite direction. I think it would be better to generalize this a bit. The question is nothing but an inequality that you must remember from high school math (more or less :)). If not, here is the video: http://www.khanacademy.org/video/graphing-inequalities?playlist=ck12.org+Algebra+1+Examples

I did an updated demo that has the isAboveFunction function. He is dead simply: he passes in the coordinates X, Y, performs a function (in the algebraic sense) on X and calculates if the result is greater than Y. In all regions where it is greater, we can obscure this area and apply some other logic.

Also remember that in computer coordinates, X and Y start from the upper left corner of the screen. X (sometimes called "left") is how far from the left side of the screen (or in this case, how far from the left side of the window). Similarly, Y (or "top") is how far down.

Put these two concepts together and you can do whatever function you want. I gave some examples, but do not hesitate to play with him:

 function isAboveFunction(x,y){ var line; //CHANGE ME //line=x*x*.025; //line= 2*x; //line = -1*x+50; line= 200/x; if(y>line){ return true; }else{ return false; } } 

http://jsfiddle.net/JM6JC/33/

Answer 2

I'm not sure how much you need it, but you can see one solution here: http://jsfiddle.net/nrabinowitz/KsCR9/

This uses CSS to display triangles:

 #triangles { border-color: darkblue darkblue steelblue steelblue; border-style:solid; border-width:20px; width:0; height:0; display: block; cursor: pointer; } 

And jQuery to handle the link:

 $('#triangles').click(function(e) { if (e.offsetX > e.offsetY) { console.log("Go to dark blue link!"); } else { console.log("Go to light blue link!"); } });