為圖片添加區(qū)域鏈接的基本寫法
首先我們看看效果：
實現(xiàn)這樣的功能需要學(xué)習(xí)以下幾點內(nèi)容荚藻。
1.認(rèn)識<img/><map><area/></map>基本結(jié)構(gòu)
首先復(fù)制一個html框架毁腿，命名為“圖片區(qū)域鏈接.html”,示例代碼如下：
<!DOCTYPE HTML> <html> <head> <title>圖片區(qū)域鏈接</title> <meta charset="utf-8"> </head> <body> </body> </html>
向<body></body>中添加<img><map><area/></map>基本結(jié)構(gòu)灼狰，示例代碼如下：
<body> <img/> <map> <area/> </map> </body>
指定要添加區(qū)域鏈接的圖片的路徑掩幢，如下：
<img src="img/image1.jpg"/> <map> <area/> </map>
讓<img>標(biāo)簽通過<map>的名字來驅(qū)使<map>為自己工作。
需要兩步寞忿，第一驰唬，給<map>起名字，name=“map”腔彰，為了兼容所有的瀏覽器定嗓，還要加上id=“map”（有的瀏覽器只認(rèn)id）。
第二萍桌，讓<img>叫出<map>的名字或id宵溅，usemap="#map"。大家要注意上炎，叫名字時要加#恃逻。這個在之前的教程中也經(jīng)常出現(xiàn)。
示例代碼如下：
<img src="img/image1.jpg" usemap="#map"/> <map name="map" id="map"> <area/> </map>
下面來劃分區(qū)域藕施。
2.為圖片劃分區(qū)域的方法
<area>是用來劃分區(qū)域的標(biāo)簽寇损，area也是“”區(qū)域“”的意思。
默認(rèn)的shape（形狀）屬性有“矩形（rect）”裳食、“圓形（circ）”矛市、“多邊形（poly）”三個值。
分別添加三個形狀诲祸，示例代碼如下：
<img src="img/image1.jpg" usemap="#map"/> <map name="map" id="map"> <area shape="rect"/> <area shape="circ"/> <area shape="poly"/> </map>
下面我們就要為區(qū)域規(guī)定參數(shù)浊吏，也就是在圖像上的位置和范圍大小。
為<area>添加coords屬性可以指定區(qū)域的位置和范圍救氯。
如果shape="rect" 則coords由四個參數(shù)組成找田。例如coords="0,0,50,50"。從左到右着憨，兩兩一組墩衙，組成兩個平面坐標(biāo)，即（0,0）和（50甲抖，50）漆改，單位是“像素”，矩形區(qū)域如下：
如果shape=“circ”准谚，coords=“50,50,10”挫剑。（50,50）定義了圓心，10是半徑氛魁。如圖：
如果shape=“poly”暮顺，coords的參數(shù)不少于3對！注意是“對”秀存！從左到右捶码，兩個數(shù)就是一組坐標(biāo)，三組坐標(biāo)可以確定一個三角形或链，多組坐標(biāo)可以確定多邊形惫恼。例如
這組參數(shù)畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長寬像素數(shù)變了澳盐，參數(shù)就不正確了）祈纯，如圖：
這時，大家會有一個問題：如何才能知道圖像中某個像素點的坐標(biāo)呢叼耙？
3.使用Gimp軟件精準(zhǔn)定位圖片區(qū)域
使用Gimp軟件可以解決這個問題腕窥。
Gimp是一款類似于Photoshop的數(shù)字圖像處理軟件，不同的是筛婉，Gimp是開源免費的簇爆。
雙擊安裝即可，注意選擇一下安裝目錄爽撒。
完成安裝之后打開入蛆，界面如下：
點擊“文件”找到“打開”：
選擇要打開的圖片名字：
點擊名稱后，右邊會有圖像預(yù)覽硕勿，點擊“打開”即可：
打開后如圖：
把鼠標(biāo)放到圖像的任意位置哨毁，看左下角：
這里就會顯示我們鼠標(biāo)所在的像素坐標(biāo)數(shù)值。
這樣我們就能方便地寫“poly”的coords了源武。
請在空閑時找一張圖片演練一下吧扼褪！
4.為區(qū)域添加鏈接
在<area/>標(biāo)簽中添加href屬性即可指定鏈接路徑，如下：
添加title屬性可以在鼠標(biāo)滑過鏈接區(qū)域時提示讀者粱栖，如下：
title="殲20氣動外形分析"
今天的內(nèi)容結(jié)束了迎捺，圖像區(qū)域鏈接在使用時還有一些注意事項，我們下次再詳細(xì)討論查排。
使用碎片時間凳枝，學(xué)習(xí)完整知識！關(guān)注大魚師兄跋核，一起精研技藝岖瑰。
