Creazione di collegamento diagonale (href) aree

Question

Diciamo che avete un 50px da 50px div/scatola

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

In questo campo si desidera avere due link che bisect in diagonale in questo modo

Si potrebbe usare la vecchia mappa/area HTML, ma questo è indesiderabile dal momento che jquery non gioca molto bene con esso ... ma questa è un'altra storia.

Sono a corto di idee e apprezzerei davvero l'aiuto/l'approfondimento su come affrontate questa situazione.

Answer 1

questo è molto semplice con jQuery, soprattutto perché si tratta di un semplice y = x divisa:

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

Quello che stiamo facendo è la rilevazione della regione nel div sulla base di ay funzione = x (qualsiasi funzione funzionerebbe comunque). A proposito, sto usando il genitore per jsfiddle solo perché il codice gira in un iframe.

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

[UPDATE ]

Ok, hai chiesto come fare una linea che va nella direzione opposta. Penso che sarebbe meglio generalizzare un po 'questo. La domanda non è altro che una disuguaglianza, che dovresti ricordare dalla matematica della scuola elementare [più o meno :)]. In caso contrario, ecco un video: http://www.khanacademy.org/video/graphing-inequalities?playlist=ck12.org+Algebra+1+Examples

Ho fatto una dimostrazione aggiornata che ha una funzione "isAboveFunction". È semplicemente semplice: passa in coordinate X, Y, esegue una funzione (in senso algebrico) su X e calcola se il risultato è maggiore di Y. In tutte le regioni in cui è maggiore, possiamo ombreggiare quella regione e applica una logica diversa.

Ricorda inoltre che nelle coordinate del computer, X e Y iniziano dalla parte superiore sinistra dello schermo. X (a volte chiamato "sinistra") è quanto lontano dal lato sinistro dello schermo (o in questo caso quanto lontano dal lato sinistro di una scatola.) Analogamente, Y (o "in alto") è quanto lontano dalla cima.

mettere questi due concetti insieme e si può fare qualsiasi funzione che si desidera ho incluso alcuni esempi, ma sentitevi liberi di giocare con essa:.

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

io non sono sicuro di come flessibile, è necessario, ma puoi vedere una soluzione qui: http://jsfiddle.net/nrabinowitz/KsCR9/

Questo utilizza CSS per rendere i triangoli:

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

e jQuery per gestire il 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!"); 
    } 
});