AREA

AREA 可以將用戶端的圖像，分成不同區域，分別設定超連結。當用戶點選圖像的不同區域時，可以啟動不同的服務網頁。此元件要用在 MAP 元件對之間。

屬性說明
ACCESSKEY | TABINDEX | ONBLUR | ONFOCUS | ALT | COORDS | HREF | NOHREF | SHAPE | TARGET
通用屬性 此元件可以使用通用屬性，請參考通用屬性的說明。
ACCESSKEY TABINDEX 請參考屬性與事件。
ONBLUR ONFOCUS 請參考屬性與事件。
ALT 用在 IMG, AREA, APPLET, INPUT 元件，當前述元件不能正常展現時，就會顯示 ALT 設定的文字。請參考 IMG 的範例。
COORDS 用來定義用戶端的圖像的地圖，用戶可用滑鼠點擊影像地圖，啟動超連結。請參考屬性 SHAPE 的說明。
HREF 指定服務主機網頁的網址。請參考屬性 SHAPE 的範例。
NOHREF 表示地圖上的這塊區域沒有超連結，所以用戶點擊此區，沒有服務網頁會被啟動。
SHAPE 用來定義用戶端的圖像的地圖，用戶可用滑鼠點擊影像地圖的不同區域，啟動不同的網頁服務。可設定以下值： rect：此為瀏覽器的預設值。配合屬性 COORDS="左, 上, 右, 下"，指定（左, 上）與（右, 下）的座標，定義一個長方形區域。座標值以物件的左上角為原點（0, 0）。區域重疊時，會執行最先定義的區域。座標單位可是像素，或百分比。實際測試發現，IE 的像素座標值不能加 px，直接用數字即可。百分比法在部份瀏覽器，不能正常作用。最安全的選擇就是，只用數字的像素座標。 circle：配合屬性 COORDS="x, y, r"，指定中心點的座標（x, y）與半徑 r，定義一個圓形區域。用百分比設定半徑時，以物件長寬中較短者為準。 poly：配合屬性 COORDS="x1, y1, x2, y2, ..., xN, yN"，指定多邊形的頂角點座標，定義一個多邊形區域。第一組座標（x1, y1）與最後一組座標（xN, yN）必須相同，才能完成一個多邊形。 default：表整個圖像區。 為了示範的效果，下面的範例其 HREF 指定的是用戶端的 javascript。通常 HREF 用來指定服務主機的網頁。 <map name='test1'> <area shape='rect' coords='0, 0, 100, 100' href='javascript:alert("綠色")'> <area shape='rect' coords='100, 0, 200, 100' href='javascript:alert("白色")'> <area shape='rect' coords='0, 100, 100, 200' href='javascript:alert("黃色")'> <area shape='rect' coords='100, 100, 200, 200' href='javascript:alert("藍色")'> </map> <img usemap='#test1' style="width:200px; height:200px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEXecGreDjswocAY_ZZCI48qSK4ZgwSNCwfcbNhGwkn0xwZBFd7C6lUFMHWoQ__AlMAlYUWcGq5gJdCuzZXtmyDbz65lmvwH4NzhVSt817LGKUQAcEnkIPE6DHwsq6U9RBNTU_UajsHtk/s200/shape.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5263094617027035362" />請點擊
TARGET 指定框架（frame）名稱。將地圖各個區域，超連結的主機服務網頁，展現於其中。請參考 ANCHOR 的說明與範例。