Tạo liên kết chéo (href) khu vực

Question

Giả sử bạn có một 50px x 50px div/hộp

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

Trong hộp này, bạn muốn có hai liên kết bisect nó theo đường chéo như vậy

Bạn có thể sử dụng HTML bản đồ/khu vực cũ nhưng điều đó không mong muốn vì jquery không chơi rất độc đáo với nó ... nhưng đó là một câu chuyện khác.

Tôi thiếu ý tưởng và thực sự đánh giá cao trợ giúp/thông tin chi tiết về cách bạn tiếp cận tình huống này.

Answer 1

này là rất đơn giản với jQuery, đặc biệt là vì nó là một đơn giản y = x chia:

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

Những gì chúng ta đang làm là phát hiện các khu vực trong div dựa trên ay = x function (bất kỳ chức năng sẽ làm việc mặc dù). Nhân tiện, tôi đang sử dụng phụ huynh cho jsfiddle chỉ vì mã chạy trong khung nội tuyến.

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

[CẬP NHẬT]

Ok, bạn được hỏi về làm thế nào để làm một đường đi theo hướng ngược lại. Tôi nghĩ tốt hơn nên khái quát điều này một chút. Câu hỏi là không có gì ngoài một sự bất bình đẳng, mà bạn nên nhớ từ toán học cấp lớp [nhiều hơn hoặc ít hơn :)]. Nếu không, đây là video: http://www.khanacademy.org/video/graphing-inequalities?playlist=ck12.org+Algebra+1+Examples

Tôi đã thực hiện bản trình bày cập nhật có chức năng "isAboveFunction". Nó chết đơn giản: nó đi theo X, Y tọa độ, thực hiện một hàm (theo nghĩa đại số) trên X, và tìm ra nếu kết quả lớn hơn Y. Trong tất cả các vùng mà nó lớn hơn, chúng ta có thể tô màu vùng đó và áp dụng một số logic khác nhau.

Cũng nên nhớ rằng trong tọa độ máy tính, X và Y bắt đầu từ trên cùng bên trái của màn hình. X (đôi khi được gọi là "trái") là cách xa phía bên trái của màn hình của bạn (hoặc trong trường hợp này cách xa bên trái của một hộp. Tương tự, Y (hoặc "top") là cách xa từ trên xuống.

Đặt hai khái niệm này với nhau và bạn có thể thực hiện bất kỳ chức năng bạn muốn tôi đã bao gồm một số ví dụ nhưng cảm thấy tự do để chơi đùa với nó:.

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

tôi không chắc chắn như thế nào linh hoạt bạn cần điều này, nhưng bạn có thể thấy một giải pháp ở đây: http://jsfiddle.net/nrabinowitz/KsCR9/

này sử dụng CSS để làm cho hình tam giác:

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

Và jQuery để xử lý các liên kết:

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