创建对角链接（href）区域

Question

假设您有50px乘50px div / box

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

在此框中，您希望有两条链接将对角线对分，如此

你可以使用旧的地图/区域HTML，但这是不受欢迎的，因为jquery并没有很好地发挥它......但这是另一个故事。

我缺乏想法，非常感谢帮助/洞察你将如何处理这种情况。

Answer 1

使用jQuery非常简单，特别是因为它是一个简单的y = x split：

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

我们正在做的是基于y = x函数检测div中的区域（任何函数都可以工作）。顺便说一下，我只使用jsfiddle的parent，因为代码在iframe中运行。

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

[<强>更新

好的，你问过如何做一条相反方向的线路。我认为最好稍微概括一下。这个问题不过是一个不平等，你应该记得小学数学[或多或少:)]。如果没有，这是一个视频： 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!");
    }
});