2014-09-19 82 views
1

我正在製作一個新的網站,並且在主頁上是一個包含不同項目(公司提供的產品)的大橫幅圖片;你可以查看網站site2.dvsport.com,看看我在說什麼。我真的很想讓這些單元格帶有產品名稱可鏈接到頁面的可點擊區域。這可能嗎?使某些區域的橫幅圖片可點擊

謝謝了。

+1

分享您的編碼... – UID 2014-09-19 19:37:37

+0

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/map – 2014-09-19 19:38:28

+0

您是否嘗試過使用Google搜索解決方案? – 2014-09-19 19:38:48

回答

0

根據圖像被點擊的位置,可以將一個圖像鏈接到多個頁面。

這種技術被稱爲imagemapping。

您只需指定圖像的哪些區域應該鏈接到哪裏。

在下面的例子中,如果你將鼠標放在左上角,它會鏈接到雅虎....並在右下角....它鏈接到hotbot。

<img src="rainbow.gif" usemap = #example border=0> 
<map name=example> 
<area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com"> 
<area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com"> 
</map> 

在上面的例子中,我們只使用了矩形imagemappings。可能的形狀是:

<area shape=rect coords= x1,y1, x2,y2 Href="http://www.domain.com"> 


<area shape=circle coords= x1,y1, x2,y2 Href="http://www.domain.com"> 


<area shape=polygon coords= x1,y1, x2,y2, .., xn,yn Href="http://www.domain.com"> 

編輯: 那麼您真正的查詢,你應該看看這個this

+0

這個反應如何?如果我在16:9屏幕上開發並且用戶在4:3上,它仍然可以工作嗎? – siegs 2014-09-19 19:43:47

+0

以及如何找到座標 – siegs 2014-09-19 19:45:08

+0

對於響應式網頁設計請查看本教程https://www.w3schools.com/css/css_rwd_intro.asp – Dash 2017-06-27 15:04:08