Создание областей диагональной связи (href)

Question

Скажем, у вас есть 50 на 50 пикселей на ячейку / блок

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

В этом поле вы хотите иметь две ссылки, которые делят его пополам по диагонали, как

Вы можете использовать старую карту / область HTML, но это нежелательно, поскольку jquery не очень хорошо с ней работает ... но это уже совсем другая история.

Мне не хватает идей, и я очень признателен за помощь /понимание того, как бы вы подошли к этой ситуации.

Answer 1

Это очень просто с jQuery, тем более что это простое y = x разбиение:

$("#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";   
    }
});

Что мы делаем, это обнаруживаем область в div на основе функции ay = x (любойфункция будет работать, хотя).Кстати, я использую parent для jsfiddle только потому, что код выполняется в iframe.

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

[ UPDATE ]

Хорошо, вы спросили о том, как сделать линию, идущую в противоположном направлении.Я думаю, что было бы лучше обобщить это немного.Вопрос не что иное, как неравенство, которое вы должны помнить из математики начальной школы [более или менее :)].Если нет, вот видео: http://www.khanacademy.org/video/graphing-inequalities?playlist=ck12.org+Algebra+1+Examples

Я сделал обновленную демонстрацию с функцией isAboveFunction.Это очень просто: он передает координаты X, Y, выполняет функцию (в алгебраическом смысле) для X и выясняет, является ли результат больше, чем Y. Во всех областях, которые он больше, мы можем затенять эту область ипримените немного другую логику.

Также помните, что в компьютерных координатах X и Y начинаются в левом верхнем углу экрана.X (иногда называемый «левым») - это то, как далеко от левой стороны экрана (или в этом случае, насколько далеко от левой стороны поля. Аналогично, Y (или «верх») - как далеко вниз от вершины.

Соедините эти две концепции вместе, и вы сможете создать любую функцию, какую захотите. Я привел несколько примеров, но вы можете поэкспериментировать с ними:

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

Я не уверен, насколько гибким вам это нужно, но вы можете увидеть одно решение здесь: http://jsfiddle.net/nrabinowitz/KsCR9/

Это использует CSS для рендеринга треугольников:

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

И jQuery для обработки ссылки:

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