用this替換this.html.title

下面的代碼完美地工作，當用戶將鼠標懸停在圖像映射的熱點上時，可以完美地顯示圖像。唯一的問題？當點擊'this.href'當然會將用戶帶到熱點圖像本身。我想保留'href'將用戶發送到我選擇的頁面。用this替換this.html.title

是否可以使用「標題」而不是「href」來定義熱點圖像？如果是這樣，請顯示詳細信息，我很新的JavaScript，謝謝！

<script type="text/javascript"> 
function ShowPicC(sImage){document.housec.src = sImage} 
</script> 

<img border="0" src="main-image.png" width="640" height='640' usemap="#FPMap0"> 
<map name="FPMap0"> 
<area onmouseover='ShowPicC(this.href)' href='hotspot1.png' alt="thisalt" title="can-png-go-here.png" shape="circle" coords="400,400,20"> 
<area onmouseover="ShowPicC(this.href)" href="hotspot2.jpg" alt="youralt" title="can-png-go-here2.png" shape="circle" coords="420,420,20"> 
<area onmouseover="ShowPicC(this.href)" href="hotspot3.jpg" alt="differentalt" title="can-png-go-here3.png" shape="circle" coords="440,440,20"> 
<area onmouseover="ShowPicC(this.href)" href="hotspot4.jpg" alt="whateveralt" title="can-png-go-here4.png" shape="circle" coords="460,460,20"> 
</map> 

<img name="housec" src="starter-hotspot-image.png" width="192" height="170">

來源

2014-07-16 ablase

哪裏是'title'在HTML？ –

謝謝Tom Fenech，將標題添加到HTML中。 – ablase

當然，雖然title不是area有效的財產。你試過了嗎？

<area onmouseover="ShowPicC(this.title)" title="someotherimage.jpg" ...

您可以使用數據屬性會更好：

<area data-image="someotherimage.jpg" ...

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

來源

2014-07-16 18:32:16 isherwood

我確實嘗試過。感謝@isherwood提供數據圖像的想法！對我來說，最困難的部分似乎是如何更改腳本中的函數，無論是標題還是數據圖像。你會知道該怎麼做嗎？ – ablase

該功能不需要更改。它接受任何傳遞的值。 – isherwood

偉大的你是對的@isherwood！ this.title確實有效（是的，沒有改變功能）。但是我很難找到獲取數據圖像的正確方法。這不是'this.data-image'嗎？對不起，我已經衝浪了，但找不到正確的語法。也是，它看起來像數據圖像是可取的。 – ablase

用this替換this.html.title

回答

相關問題