| 教學內容：
1、圖片地圖(Image Map)超連結說明：劃分圖片的某一範圍(區域形狀)做成超連結的語法。
2、製作方式有二種：
Server-Side Image Map 在伺服器端計算傳回瀏覽者端(不適用)
Client-Side Image Map 在瀏覽者直接讀入Html文件解譯(都用這個) |
3、語法
<Map Name="此Map的名稱">
<Area Shape="區域形狀(地圖)名稱" Coords="區域形狀座標"
Href="超連結URL">
<Area Shape="區域形狀(地圖)名稱" Coords="區域形狀座標"
Href="超連結URL">
<Area Shape="區域形狀(地圖)名稱" Coords="區域形狀座標"
Href="超連結URL">
</Map>
<Img Src="圖片位置URL" Usemap="#此Map的名稱"> |
範例：
<Map Name="Map001">
<Area Shape="Rect" Coords="0,0,60,76"
Href="http://www.many.com.tw" ALt="這是矩形，連結到拓米數位"
>
<Area Shape="Circle" Coords="110,38,38"
Href="http://www.kimo.com.tw" Alt="這是圓形，連結到kimo"
>
<Area Shape="Ploy" Coords="180,0,142,76,218,76"
http://www.pchome.com.tw" Alt="這是多邊形，連結到pchome">
</Map>
<Img Src="http://www.many.com.tw/many/images/logo.gif"
Usemap="#Map001" width="218" height="76"
border="0"> |
4、語法說明
A、<Map Name="Map001">.........</Map>：表示要製作圖片地圖的起始和終止標籤，Name是此Map的名稱
B、<Area Shape="區域名稱(地圖)" Coords="座標"
Href="超連結位置">：此標籤用來定義一個區域(地圖)
C、Shape是地圖的屬性名稱有三種：Rect矩形、Circle圖形、Ploy多邊形
D、Coords是座標的屬性名稱
E、座標表示法：假設有一張圖片如本站首頁上的Mark，像素(pixel)寬：218，像素高：76
| 所以本站的Mark的起始和終點座標為：(0,0) ~ (218,76) |
| Rect矩形：起始和終點二點即可，如：Coords="X1,Y1,X2,Y2" =>
畫一矩形做超連結 |
| Circle圖形：中心點座標和半徑，如：Coords="X1,Y1,R" =>畫一半徑為R的圖形做超連結 |
| Ploy多邊形：所有點的座標(n個點)，如：Coords="x1,y1,x2,y2,......,xn,yn" =>畫一n邊形做超連結 |
F、Alt是超連結的說明文字
G、<Img Src="圖片來源URL" Usemap="#Map地圖名稱">：Usemap"#名稱"中的名稱要同<Map
Name="此名稱">
H、width=""：來源圖片的寬、height=""：來源圖片的高、border="0"：超連結邊框為零
I、顯示結果是在本站的Mark上有三個超連結區域，分別為矩形、圖形、三角形，分別超連結到不同位置 |
|
