超鏈接不同部分的元素（如邊框）到不同的鏈接

在這個小提琴：http://jsfiddle.net/peey/bbseQ/1/，我試圖超鏈接由css（using this snippet），這基本上是一個元素的左邊界。超鏈接不同部分的元素（如邊框）到不同的鏈接

正如您所看到的那樣，在小提琴中，超鏈接的實際區域包括第二個形狀中顯示的紅色區域。

我正在尋找一種方法，我只能超鏈接可見區域或右邊框。我認爲可能使用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>

來源

2012-11-04 Peeyush Kushwaha

你的問題是好的，但要解決這個問題，我使用了一些數學。

假設這種規模的邊界是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; 
    } 
});

用於比較，如果單擊事件是內部的箭頭或不將計算公式。

DEMO這裏：http://jsfiddle.net/bbseQ/9/

更新：Firefox的作品呢！乾杯:)

來源

2012-11-04 10:45:48

鏈接無法在任何地方工作，甚至沒有在三角形內 –

哦，等待，它的工作正常在鉻，但不是在Firefox。哼。 –

你可以看到這個http://jsfiddle.net/bbseQ/5/ 我有點更新了HTML。 –

超鏈接不同部分的元素（如邊框）​​到不同的鏈接

回答

相關問題

超鏈接不同部分的元素（如邊框）到不同的鏈接