在裝修過程中最頭疼的一件事，也是最費(fèi)了勁的一件事，給圖片做鏈接。

有人心生嘀咕，呵呵，不是給<image>標(biāo)簽加一個href屬性就可以了嘛！！

是的，一一媽媽一開始也只知道這個方法呢，于是，問題應(yīng)運(yùn)而生了。

當(dāng)時從網(wǎng)上找的一些素材，比如像下面這個圖

oh,my god，收藏本店，信用評價，店鋪介紹都在一張圖上，天啊給<image>標(biāo)簽加href屬性用不了了。因?yàn)檫@種方法只針對一個圖片一個鏈接啊。如果是靜態(tài)圖的話好辦了，我們用手頭任何一款工具都足以把它切割開。然后再分別加上鏈接。

可是，一一媽媽偏偏選中的是一款動態(tài)GIF圖像，怎么辦。就知道ImageReady可以編輯GIF。

好吧，用ImageReady打開動態(tài)圖像，切片制作，再還原整圖，然后挨個加鏈接（此處非本文重點(diǎn)，具體操作省略）。由于一一媽媽當(dāng)時找的圖內(nèi)容比較多，切成了好多片，然后還原，最后在往整個頁面上合并。整整大半天時間過去了。

一一媽媽總覺得這個方法笨笨的。于是問百度大叔，大叔教了一一媽媽一個很討巧的方法。

圖像熱點(diǎn)設(shè)置。

有效利用<img>標(biāo)簽的usemap屬性，給圖片劃分一個地圖，設(shè)定圖片熱點(diǎn)（即給圖片分區(qū)，但不是切割，圖片還是完整的，只是用代碼將圖片分成幾個部分），然后給熱點(diǎn)設(shè)定相應(yīng)的鏈接。

先簡單介紹一下usemap屬性的用法。

使用時：

<img src="test.gif" usemap="#Map">

這里的#后面的Map為我們自定義的圖像地圖的名稱，可以任意設(shè)定噢。

之后，我們就要對圖像地圖進(jìn)行定義，設(shè)定熱點(diǎn)了。

<map name="Map">

<area shape=rect coods="100,100,200,200" href="test1.html">

<area shape=rect coods="200,100,300,200" href="test2.html">

</map>

好，且聽一一媽媽一一解釋。

<map name="Map">，這里為map標(biāo)簽，引號里的Map要和前面<usemap="#Map“>里定義的#后的內(nèi)容一致噢，要不然是不會起作用的。

<area shape=rect coods="100,100,200,200" href="test1.html">，這里就是定義熱點(diǎn)的地方了，

shape和coods：是兩個主要的參數(shù)，用于設(shè)定熱點(diǎn)的形狀和大小。href就是用來設(shè)定你寶貝的鏈接嘍。其基本用法如下：

用法1：<area shape="rect" coords="x1, y1,x2,y2" href=url>表示設(shè)定熱點(diǎn)的形狀為矩形，左上角頂點(diǎn)坐標(biāo)為（X1,y1），右下角頂點(diǎn)坐標(biāo)為（X2,y2）。

用法2：<area shape="circle" coords="x1, y1,r" href=url>表示設(shè)定熱點(diǎn)的形狀為圓形，圓心坐標(biāo)為（X1,y1），半徑為r。

用法3：<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示設(shè)定熱點(diǎn)的形狀為多邊形，各頂點(diǎn)坐標(biāo)依次為（X1,y1）、（X2,y2）、（x3,y3） ......。

接下來是個小重點(diǎn)嘍，就是上面的坐標(biāo)怎么取的問題了。

我們還是用ImageReady來打開動態(tài)圖像。

假如我們要給上圖中的“收藏圖片”加收藏自己店鋪的鏈接，我們就要把圖中的“收藏圖片”區(qū)域設(shè)為熱點(diǎn)。因?yàn)?ldquo;收藏圖片”區(qū)域?yàn)榉叫危覀冇蒙辖榻B的用法1：<area shape="rect" coords="x1, y1,x2,y2" href=url>。

shape="rect"就不用改了，因?yàn)槲覀兙褪且胤叫螀^(qū)域。

coords="x1, y1,x2,y2"中坐標(biāo)的取法，用ImageReady打開上圖后，將鼠標(biāo)置于“收藏圖片”區(qū)域的左上角，記下X與Y坐標(biāo)，這兩個值就是X1與Y1噢。

然后，將鼠標(biāo)置于“收藏圖片”區(qū)域的右下角，記下X與Y坐標(biāo)，這兩個值就是X2與Y2。

最后，我們?nèi)∠伦约旱赇伿詹赜玫逆溄印Ｔ谧约旱腎D區(qū)域點(diǎn)擊右鍵，然后點(diǎn)擊屬性。粘貼出自已的收藏鏈接地址。

好了，到此為止，我們的取值工作就完成了，熱點(diǎn)區(qū)域設(shè)完的完整樣式如下。

<area shape="rect" coords="19,104,79,208" href="http://.........">

可以依此法設(shè)置多個熱點(diǎn)，分別給信用評價，店鋪介紹等加鏈接噢。

最后，別忘了</map>，這個很重要，這告訴瀏覽器你的圖片地圖到這里結(jié)束了。

樂發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購信息和超市加盟信息.打造國內(nèi)超市采購商與批發(fā)市場供應(yīng)廠商搭建網(wǎng)上批發(fā)市場平臺,是全國批發(fā)市場行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺規(guī)則

本文來源： 手把手教你怎么給淘寶網(wǎng)店圖片分區(qū)做鏈接（熱點(diǎn)區(qū)域的有效應(yīng)用）