만들기 대각선 링크 (HREF) 지역

Question

당신이 그렇게

처럼 대각선 방향으로 양분 두 개의 링크를 갖고 싶어이 상자에 50 픽셀 사업부/상자

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

하여 50 픽셀을 말해봐

이전 맵/영역 HTML을 사용할 수는 있지만 jquery가이 맵핑과 잘 일치하지 않기 때문에 바람직하지 않습니다.하지만 그것은 또 다른 이야기입니다.

저는 아이디어가 부족하며이 상황에 어떻게 접근 할 수 있는지에 대한 도움/통찰력을 정말 고맙게 생각합니다.

Answer 1

이는 간단한 Y = X 분할 특히 때문에, jQuery로 매우 간단합니다 :

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

우리가 바깥 =의 X 기능에 따라 사업부에서 지역 (모든 기능을 감지하는 일을하는지 그래도 작동 할거야). 그건 그렇고, 코드가 iframe에서 실행되기 때문에 jsfiddle에만 parent를 사용하고 있습니다.

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!"); 
    } 
});