Tworzenie przekątnej Link (href) obszary

Question

Say masz 50px przez 50px div/box

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

w tym polu, które chcesz mieć dwa linki, które przepoławiać go ukośnie jak tak

Można użyć starego kodu mapy/obszaru HTML, ale jest to niepożądane, ponieważ jquery nie gra z nim zbyt dobrze ... ale to już inna historia.

Brakuje mi pomysłów i naprawdę doceniam pomoc/wgląd w to, jak podchodzisz do tej sytuacji.

Answer 1

To jest bardzo proste z jQuery, zwłaszcza, że ​​jest to prosta y = x dzielone: ​​

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

Co robimy wykrywa regionu w oparciu o div ay = x (funkcja żadnej funkcji będzie działać). Nawiasem mówiąc, używam rodzica dla jsfiddle tylko dlatego, że kod działa w elemencie iframe.

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

[UPDATE]

Ok, jesteś proszony o jak zrobić linią idąc w przeciwnym kierunku. Myślę, że byłoby lepiej to uogólnić. Pytanie to tylko nierówność, o której powinieneś pamiętać z matematyki szkolnej [mniej więcej :)]. Jeśli nie, oto wideo: http://www.khanacademy.org/video/graphing-inequalities?playlist=ck12.org+Algebra+1+Examples

Zrobiłem zaktualizowaną demonstrację, która ma funkcję "isAboveFunction". To proste: przechodzi w współrzędnych X, Y, wykonuje funkcję (w sensie algebraicznym) na X i określa, czy wynik jest większy niż Y. We wszystkich regionach, w których jest większa, możemy zasłonić ten region i zastosuj inną logikę.

Pamiętaj również, że we współrzędnych komputerowych X i Y zaczynają się od lewego górnego rogu ekranu. X (czasami nazywany "lewym") jest jak daleko od lewej strony ekranu (lub w tym przypadku jak daleko od lewej strony pola. Podobnie, Y (lub "góra") jest jak daleko od góry.

umieścić te dwie koncepcje razem i można dokonać dowolną funkcją chcesz mam włączone kilka przykładów, ale czuć się swobodnie bawić się z nim.

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

nie jestem pewien, w jaki sposób elastyczny, który tego potrzebujesz, ale możesz zobaczyć jedno rozwiązanie: http://jsfiddle.net/nrabinowitz/KsCR9/

używa CSS do renderowania trójkątów:

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

i jQuery do obsługi 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!"); 
    } 
});