如何在我的圖像上設置鏈接

-1

我想在我的圖像中最大的圓形區域上設置超鏈接。如何在我的圖像上設置鏈接

我嘗試使用地圖標記。

我嘗試在區域標記上設置絕對位置座標，當我在PC上的瀏覽器上單擊它時，它工作正常。

但我的android瀏覽器上的絕對位置是錯誤的。

因此，我嘗試使用div標籤來獲取我的鏈接。

但我沒有找到我點擊的綠色區域。

我下面的鏈接

<style type="text/css"> 
    #outer{ 
     background:orange; 
    } 
    #inner{ 
     width: 50%; 
     height: 50%; 
     top:10%; 
     right:10%; 
     margin: 0 auto; 
     position: relative; 
     background:green; 
    } 
</style> 

<div id=outer> 
    <div> 
     <img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720" height="100%" width="100%" /> 
    </div> 
    <div id=inner> 
     <a href="https://www.google.com"></a> 
    </div> 
</div>

代碼可以爲更多的檢查https://jsfiddle.net/hL09ses6/1/。

來源

2016-07-19 weilun

Link是不是整體形象。我希望它只是爲了最大的圈子... – weilun

您可以使用圖像作爲hyperlink到另一頁：其href屬性設置爲url

通過包裝它的錨標記<a> &
內您希望瀏覽器導航到的頁面。

代碼：

<a href="https://www.google.com"> 
    <img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720"height="100%" width="100%" /> 
</a>

退房this fiddle更多。 下面的代碼片段，你可以看到你自己的代碼工作：

#outer { 
 
    background: orange; 
 
} 
 

 
#inner { 
 
    width: 50%; 
 
    height: 50%; 
 
    top: 10.5%; 
 
    right: 10%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    background: green; 
 
} 
 

 
#bigcircle { 
 
    /* The numbers may require slight adjustments */ 
 
    width: 21.6%; 
 
    height: 36%; 
 
    top: 1.6%; 
 
    right: 22.8%; 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    border-radius: 100%; 
 
}

<div id=outer> 
 
    <div> 
 
    <img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720" height="100%" width="100%" /> 
 
    </div> 
 
    <a href="https://www.google.com"> 
 
    <div id="bigcircle"></div> 
 
    </a> 
 
    <div id=inner> 
 
    <a href="https://www.google.com"></a> 
 
    </div> 
 
</div>

對於更高級的用法，我建議圖像映射使用！瞭解更多here。

來源

2016-07-19 08:09:37

不適合整個圖像。我希望它只是爲了最大的圈子 – weilun

現在嘗試點擊大圈。 –

我嘗試在我的博客中使用您的代碼。但它的位置是錯誤的，我可以修復它嗎？http：//chenweilun.blogspot.tw/ – weilun

你的演示是here

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<p> 
 
An image that is a link: 
 
<a href="https://www.google.com"> 
 
<img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720" height="100%" width="100%" /> 
 
</a> 
 
</p> 
 

 
</body> 
 
</html>

來源

2016-07-19 08:10:13 Developer

不適合整個圖像。我希望它只是爲了最大的圈子 – weilun

你的意思是點擊只在特定的圖像部分？ – Developer

看看這個鏈接http://www.w3schools.com/tags/tag_area.asp – Developer

您需要添加錨標記之間的img標籤。

<div> 
 
    <a href="http://google.com"> 
 
    <img src="https://docs.google.com/drawings/d/1KuxMbSoKHsl1MXQUi2nmrOcSpCWN_WaRsL7Q1WatODA/pub?w=960&amp;h=720" height="100%" width="100%" /> 
 
    </a> 
 
</div>

來源

2016-07-19 08:10:14

爲什麼downvote？那個人可以告訴我關於downvote的事嗎？ –

不適合整個圖像。我希望它只是最大的圈子 – weilun

你是指上面圖像中最大的圈子？ –

如何在我的圖像上設置鏈接

回答

相關問題