创建对角链接(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";   
    }
});

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

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

[ 更新 ]

好的,你问过如何做一条相反方向的线路.我认为最好稍微概括一下.这个问题不过是一个不平等,你应该记得小学数学[或多或少:)].如果没有,这是一个视频:http: //www.khanacademy.org/video/graphing-inequalities？playlist = key12.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/