如何在圖片上添加熱點超鏈接

經?？吹胶芏啻筚u家的店鋪都會制作熱門標簽（在一張圖片上可以點擊不同的超鏈接），這樣可以方便客戶快速找到自己想找的相關寶貝，制作熱門標簽非常有利于提高店鋪的用戶體驗，下面我就來詳細的說下如何制作這種熱門標簽。

這里我們需要用到html中的map標簽，什么是map標簽？說的通俗一點，map標簽就是可以定義一張”帶有可點擊區域“的圖像，也就是運用map標簽可以在一張圖片上添加N個超鏈接，而且所有主流瀏覽器都支持map標簽。

那么如何使用這個map標簽呢？首先，請看以下代碼：

1、標簽里加入一個usemap="#圖像名稱"（這個圖像名稱隨便自己寫什么都可以，只要和下面的map圖像名稱一樣即可。注意，圖像名稱前面有個#號）；

2、（注意，這里的圖像名稱前面沒有#號）；

3、這里是關鍵的一步，需要定義超鏈接，就需要用到map中的area，area可定義圖像映射中的區域；

shape定義超鏈接的形狀（rect=矩形），coords定義超鏈接形狀的坐標（順序為：左-上-右-下），href="#"超鏈接地址。

如何確定超鏈接的具體坐標呢？當然是使用photoshop了，首先把標尺設置為像素，使用放大工具，按照左上右下的順序拉參考線。如下圖，需要給“淘寶美工網”添加超鏈接（圖片尺寸500*300）：

具體坐標就是：coords="150,55,355,95"

完整代碼如下：（需要添加幾個超鏈接就添加幾個arca即可）

樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。

本文內容整合網站：百度百科、知乎、淘寶平臺規則

本文來源： 如何在圖片上添加熱點超鏈接