img usemap屬性 中國地圖連結
阿新 • • 發佈：2019-01-20
html的img標籤：定義一個影象在網頁中引入。它還有個usemap屬性很有意思。
看看51ditu首頁中有一個地圖，中部有個中國地圖。點選右鍵下載下來看下就是一個普通的圖片。
但點選地圖上的省份卻可以觸發不同的事件（或開啟不同的連結），很有意思。原來是使用了usemap屬性。
當然還要定義一個map標籤。整份程式碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>img usemap屬性</title>
</head>
<body>
<img src="http://img.jb51.net/maps/chinamap.gif" usemap="#Map" border="1"/>
<map name="Map" class="maparea">
<area shape="rect" coords="73,87,103,104" href="javascript:alert('新疆')">
<area shape="rect" coords="144,125,173,142" href="javascript:alert('青海')">
<area shape="rect" coords="84,158,115,175" href="javascript:alert('西藏')">
<area shape="rect" coords="220,90,257,105" href="javascript:alert('內蒙古')">
<area shape="rect" coords="348,45,389,61" href="javascript:alert('黑龍江')">
<area shape="rect" coords="346,68,371,83" href="javascript:alert('吉林')">
<area shape="rect" coords="323,84,351,100" href="javascript:alert('遼寧')">
<area shape="rect" coords="298,100,326,114" href="javascript:alert('天津')">
<area shape="rect" coords="288,120,314,136" href="javascript:alert('山東')">
<area shape="rect" coords="268,107,295,121" href="javascript:alert('河北')">
<area shape="rect" coords="207,116,235,130" href="javascript:alert('寧夏')">
<area shape="rect" coords="186,162,214,179" href="javascript:alert('四川')">
<area shape="rect" coords="256,142,281,157" href="javascript:alert('河南')">
<area shape="rect" coords="305,144,332,159" href="javascript:alert('江蘇')">
<area shape="rect" coords="320,162,342,177" href="javascript:alert('上海')">
<area shape="rect" coords="216,168,243,185" href="javascript:alert('重慶')">
<area shape="rect" coords="250,162,277,177" href="javascript:alert('湖北')">
<area shape="rect" coords="283,161,308,177" href="javascript:alert('安徽')">
<area shape="rect" coords="213,196,239,209" href="javascript:alert('貴州')">
<area shape="rect" coords="243,183,269,198" href="javascript:alert('湖南')">
<area shape="rect" coords="273,185,299,200" href="javascript:alert('江西')">
<area shape="rect" coords="308,177,334,193" href="javascript:alert('浙江')">
<area shape="rect" coords="179,210,204,225" href="javascript:alert('雲南')">
<area shape="rect" coords="227,214,252,228" href="javascript:alert('廣西')">
<area shape="rect" coords="231,248,257,263" href="javascript:alert('海南')">
<area shape="rect" coords="292,200,319,214" href="javascript:alert('福建')">
<area shape="rect" coords="259,219,287,231" href="javascript:alert('廣東')">
<area shape="rect" coords="244,231,270,246" href="javascript:alert('澳門')">
<area shape="rect" coords="276,232,304,248" href="javascript:alert('香港')">
<area shape="rect" coords="311,228,338,243" href="javascript:alert('臺灣')">
<area shape="rect" coords="272,90,302,107" href="javascript:alert('北京')">
<area shape="rect" coords="196,130,222,145" href="javascript:alert('甘肅')">
<area shape="rect" coords="246,116,272,130" href="javascript:alert('山西')">
<area shape="rect" coords="224,136,252,151" href="javascript:alert('陝西')">
</map>
</body>
</html>
map標籤裡的area標籤的幾個屬性意義見：http://www.w3school.com.cn/tags/tag_area.asp
這裡還是記下area的shape屬性，可選項有矩形，圓形和多邊形。尤其要注意的是coords屬性，得結合shape使用，影象左上角的座標是 "0,0"
看看51ditu首頁中有一個地圖，中部有個中國地圖。點選右鍵下載下來看下就是一個普通的圖片。
但點選地圖上的省份卻可以觸發不同的事件（或開啟不同的連結），很有意思。原來是使用了usemap屬性。
當然還要定義一個map標籤。整份程式碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>img usemap屬性</title>
</head>
<body>
<img src="http://img.jb51.net/maps/chinamap.gif" usemap="#Map" border="1"/>
<map name="Map" class="maparea">
<area shape="rect" coords="73,87,103,104" href="javascript:alert('新疆')">
<area shape="rect" coords="144,125,173,142" href="javascript:alert('青海')">
<area shape="rect" coords="84,158,115,175" href="javascript:alert('西藏')">
<area shape="rect" coords="220,90,257,105" href="javascript:alert('內蒙古')">
<area shape="rect" coords="348,45,389,61" href="javascript:alert('黑龍江')">
<area shape="rect" coords="346,68,371,83" href="javascript:alert('吉林')">
<area shape="rect" coords="323,84,351,100" href="javascript:alert('遼寧')">
<area shape="rect" coords="298,100,326,114" href="javascript:alert('天津')">
<area shape="rect" coords="288,120,314,136" href="javascript:alert('山東')">
<area shape="rect" coords="268,107,295,121" href="javascript:alert('河北')">
<area shape="rect" coords="207,116,235,130" href="javascript:alert('寧夏')">
<area shape="rect" coords="186,162,214,179" href="javascript:alert('四川')">
<area shape="rect" coords="256,142,281,157" href="javascript:alert('河南')">
<area shape="rect" coords="305,144,332,159" href="javascript:alert('江蘇')">
<area shape="rect" coords="320,162,342,177" href="javascript:alert('上海')">
<area shape="rect" coords="216,168,243,185" href="javascript:alert('重慶')">
<area shape="rect" coords="250,162,277,177" href="javascript:alert('湖北')">
<area shape="rect" coords="283,161,308,177" href="javascript:alert('安徽')">
<area shape="rect" coords="213,196,239,209" href="javascript:alert('貴州')">
<area shape="rect" coords="243,183,269,198" href="javascript:alert('湖南')">
<area shape="rect" coords="273,185,299,200" href="javascript:alert('江西')">
<area shape="rect" coords="308,177,334,193" href="javascript:alert('浙江')">
<area shape="rect" coords="179,210,204,225" href="javascript:alert('雲南')">
<area shape="rect" coords="227,214,252,228" href="javascript:alert('廣西')">
<area shape="rect" coords="231,248,257,263" href="javascript:alert('海南')">
<area shape="rect" coords="292,200,319,214" href="javascript:alert('福建')">
<area shape="rect" coords="259,219,287,231" href="javascript:alert('廣東')">
<area shape="rect" coords="244,231,270,246" href="javascript:alert('澳門')">
<area shape="rect" coords="276,232,304,248" href="javascript:alert('香港')">
<area shape="rect" coords="311,228,338,243" href="javascript:alert('臺灣')">
<area shape="rect" coords="272,90,302,107" href="javascript:alert('北京')">
<area shape="rect" coords="196,130,222,145" href="javascript:alert('甘肅')">
<area shape="rect" coords="246,116,272,130" href="javascript:alert('山西')">
<area shape="rect" coords="224,136,252,151" href="javascript:alert('陝西')">
</map>
</body>
</html>
map標籤裡的area標籤的幾個屬性意義見：http://www.w3school.com.cn/tags/tag_area.asp
這裡還是記下area的shape屬性，可選項有矩形，圓形和多邊形。尤其要注意的是coords屬性，得結合shape使用，影象左上角的座標是 "0,0"