經(jīng)?？吹胶芏啻筚u家的店鋪都會(huì)制作熱門標(biāo)簽（在一張圖片上可以點(diǎn)擊不同的超鏈接），這樣可以方便客戶快速找到自己想找的相關(guān)寶貝，制作熱門標(biāo)簽非常有利于提高店鋪的用戶體驗(yàn)，下面我就來(lái)詳細(xì)的說(shuō)下如何制作這種熱門標(biāo)簽。
這里我們需要用到html中的map標(biāo)簽，什么是map標(biāo)簽？說(shuō)的通俗一點(diǎn)，map標(biāo)簽就是可以定義一張”帶有可點(diǎn)擊區(qū)域“的圖像，也就是運(yùn)用map標(biāo)簽可以在一張圖片上添加N個(gè)超鏈接，而且所有主流瀏覽器都支持map標(biāo)簽。
那么如何使用這個(gè)map標(biāo)簽?zāi)兀渴紫?，?qǐng)看以下代碼：
1 |
<imgusemap="#圖像名稱"src=""/> |
2 |
<mapname="圖像名稱"id="圖像名稱"> |
3 |
<areacoords="0,0,0,0"shape="rect"href="#"> |
4 |
|
1、標(biāo)簽里加入一個(gè)usemap="#圖像名稱"（這個(gè)圖像名稱隨便自己寫(xiě)什么都可以，只要和下面的map圖像名稱一樣即可。注意，圖像名稱前面有個(gè)#號(hào)）；
2、（注意，這里的圖像名稱前面沒(méi)有#號(hào)）；
3、這里是關(guān)鍵的一步，需要定義超鏈接，就需要用到map中的area，area可定義圖像映射中的區(qū)域；
1 |
<areashape="rect"coords="0,0,0,0"href="#"> |
shape定義超鏈接的形狀（rect=矩形），coords定義超鏈接形狀的坐標(biāo)（順序?yàn)椋鹤?上-右-下），href="#"超鏈接地址。
如何確定超鏈接的具體坐標(biāo)呢？當(dāng)然是使用photoshop了，首先把標(biāo)尺設(shè)置為像素，使用放大工具，按照左上右下的順序拉參考線。如下圖，需要給“淘寶美工網(wǎng)”添加超鏈接（圖片尺寸500*300）：
具體坐標(biāo)就是：coords="150,55,355,95"
完整代碼如下：（需要添加幾個(gè)超鏈接就添加幾個(gè)arca即可）
1 |
<imgusemap="#map1"src="http://www.deerpark1movers.com/attachments/date_201303/e1ead63bcc445d219b3a29d34805cdbd.jpg"/> |
2 |
<mapname="map1"id="map1"> |
3 |
<areacoords="150,55,355,95"shape="rect"href="http://www.deerpark1movers.com/"> |
4 |
|
樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。
本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則
本文來(lái)源： 如何在圖片上添加熱點(diǎn)超鏈接
