1

在这个小提琴中：http: //jsfiddle.net/peey/bbseQ/1/，我试图超链接一个由css制作的三角形（使用这个片段），它基本上是一个元素的左边框。

如您所见，在小提琴中，超链接的实际区域包括第二个形状中显示的红色区域。

我正在寻找一种方法，我可以用它只超链接可见区域或右边框。我认为使用 jQuery 或纯 JavaScript 甚至其他一些 JavaScript 库可能是可能的，但我不确定如何。

此外，是否有任何方式可以将 HTML 图像映射与元素一起使用，因为如果可以，我可以使用它们来定义要超链接的区域。

谢谢你。

这是html代码：

<body>
I just want to link green, visible area    
<a href="#"><div class="arrow-right"></div></a>
But the actual hyperlinked area includes red:
<a href="#"><div class="arrow-right"></div></a>

<style>
.arrow-right{
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;    
    border-left: 60px solid green;
}

a:last-child .arrow-right{
    background:red;
}
*{margin:10px;}
</style>
</body>
4

1 回答 1

0

你的问题很好，但为了解决它，我使用了一些数学。

假设边框的大小为 60：

var v = 60;
$('a').on("click", function(event){
    var x = event.pageX - $(this).offset().left;
    var y = event.pageY - $(this).offset().top;
    if((x==y || x<y) && x<v && (x+y)<v*2) {
        console.log(x+" "+y);
    } else {
        console.log('out!');
        return false;
    }
});

用于比较的等式将计算点击事件是否在箭头内。

演示在这里：http: //jsfiddle.net/bbseQ/9/

更新：也适用于 Firefox！干杯:)

于 2012-11-04T10:45:48.627 回答