1

このフィドル: http://jsfiddle.net/peey/bbseQ/1/で、CSS によって作成された三角形 (このスニペットを使用) をハイパーリンクしようとしましたが、これは基本的に要素の左側の境界線です。

フィドルでは、ご覧のとおり、ハイパーリンクされている実際の領域には、2 番目の図形に示されている赤い領域が含まれています。

可視領域または右の境界線のみをハイパーリンクできる方法を探しています。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 に答える