Creating diagonal link(href) areas

Question

Say you have a 50px by 50px div/box

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

In this box you want to have two links that bisect it diagonally like so

You could use the old map/area HTML but that's undesirable since jquery doesn't play very nicely with it... but that's another story.

I'm short of ideas and would really appreciate help/insight on how would you approach this situation.

Answer 1

This 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're doing is detecting the region in the div based on a y=x function (any function would work though). By the way, I'm using parent for jsfiddle only because the code runs in an iframe.

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

[UPDATE]

Ok, you asked about how to do a line going in the opposite direction. I think it'd be better to generalize this a bit. The question is nothing but an inequality, which you should remember from grade school math [more or less :)]. If not, here's a video: http://www.khanacademy.org/video/graphing-inequalities?playlist=ck12.org+Algebra+1+Examples

I've made an updated demonstration that has an "isAboveFunction" function. It's dead simple: it passes in X,Y coordinates, performs a function (in the algebraic sense) on X, and figures out if the result is greater than Y. In all the regions that it IS greater, we can shade that region and apply some different logic.

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

Put these two concepts together and you can make any function you want. I have included some examples but feel free to play around with it:

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 flexible you need this to be, but you can see one solution here: http://jsfiddle.net/nrabinowitz/KsCR9/

This uses CSS to render the 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!");
    }
});