【转】HTML中的map标签

html中的Map,area标签详解

工具   Imagination Image Map Editor

一.定义和用法

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

二.脚本示例：

1. <!--定义一个图像 他的边框为0(border) usemap(指定该图像被用作图像地图) "#mymap"(所使用的图像热点映射名称)-->
2. <img src="logo.gif" border=0 usemap="#mymap">
3. <!--定义热点映射--->
4. <map name=mymap>
5. <!---定义第一个热点区域---->
6. <!--shape(定义热点区域形状) "rect"(矩形) coords(设定坐标) "0,0,(矩形左上角位置坐标)50,50,"(右下角位置坐标) href(设定超链接指向) "a.html"(超链接指向值)-->
7. <area shape="rect" coords="0,0,50,50" href="a.html">
8. <!--定义第二个热点区域-->
9. <area shape="rect" coords="50,0,100,50" href="b.html">
10. <!---定义第三个热点区域-->
11. <area shape="rect" coords="100,0,150,50" href="c.html">
12. </map>

shqpe属性的设置说明:
1.rect 定义一个矩形区域,coords属性设置值为矩形的左上角,右下角的坐标,各个坐标值之间用逗号分开;
2.poly 定义一个多边形区域, coords属性设置值为多边形各项顶点的坐标值;
3.circle 定义一格圆形区域, coords属性设置值为圆心坐标及半径,前两个参数分别为圆心的横,纵坐标,第三个参数为半径.

三.示例

1.多边形

<img src="http://farm4.static.flickr.com/3359/3553704246_f1b12aaa6e.jpg" _fcksavedurl="http://farm4.static.flickr.com/3359/3553704246_f1b12aaa6e.jpg" width="740" height="595" border="0" usemap="#Map"> <map name="Map"> <area shape="poly" coords="285,187,282,177,278,168,269,163,262,158,254,154,246,153,237,149,231,142,234,135,236,128,236,120,233,115,232,110,227,105,221,102,216,96,213,89,206,84,199,89,193,91,187,94,183,100,182,107,174,110,166,108,158,104,153,108,150,115,146,120,143,126,142,131,134,128,128,127,121,128,118,134,117,140,117,145,117,153,112,158,107,163,103,170,96,174,86,175,78,173,69,177,63,181,55,181,47,179,39,179,31,180,27,186,21,191,23,195,20,202,22,207,29,205,32,209,33,216,32,221,26,225,26,233,33,235,36,240,37,247,38,253,44,257,48,264,55,265,55,271,56,277,60,280,66,281,74,282,78,276,82,271,87,270,93,272,96,276,104,275,112,271,117,274,118,279,125,281,132,279,140,278,147,278,156,276,164,273,171,274,180,274,188,276,194,279,196,283,203,282,208,285,214,286,214,280,214,275,219,269,216,262,209,255,210,249,217,248,225,247,233,243,240,242,245,242,242,237,240,229,243,224,249,221,254,218,259,212,265,207,274,205,280,205,282,197" href="/destination/show_province_map.asp?ProvinceCode=24"> <area shape="poly" coords="62,300,61,307,59,312,54,308,50,309,50,315,51,321,48,328,51,336,56,338,62,341,67,347,69,354,75,357,81,357,87,357,92,364,97,368,102,373,108,376,112,381,114,388,121,390,126,394,130,400,134,404,140,404,146,406,152,410,157,408,163,408,168,407,168,412,169,418,175,413,182,409,189,409,197,412,203,416,208,421,208,429,214,432,222,432,231,434,238,430,245,426,254,423,257,417,262,414,267,418,274,420,280,424,283,418,288,414,294,418,298,414,297,408,299,405,304,403,305,397,303,392,305,386,305,377,303,370,299,363,291,356,288,351,284,355,280,359,274,362,272,357,266,356,262,353,258,347,248,343,237,343,227,337,215,333,207,327,197,321,195,311,195,302,195,295,196,289,197,283,190,277,174,274,162,273,151,277,137,278,122,280,116,274,102,275,110,273,91,273,78,275,66,283,59,288,85,271,76,278,66,285,60,289" href="/destination/show_province_map.asp?ProvinceCode=28"> <area shape="poly" coords="212,250,220,248,229,245,237,244,244,242,253,242,261,243,266,245,273,250,279,256,290,256,292,250,300,250,308,252,316,257,326,260,334,267,342,271,350,273,352,281,356,291,359,299,356,305,348,313,342,317,346,324,340,323,332,323,332,329,334,337,337,344,332,348,323,347,316,348,310,344,305,339,302,332,294,329,287,330,290,336,287,343,286,350,283,357,273,359,265,356,254,345,241,344,227,338,214,332,200,323,194,308,195,295,197,284,207,284,214,282,216,273,217,266,209,257" href="/destination/show_province_map.asp?ProvinceCode=31"> <area shape="poly" coords="293,419,296,427,295,441,296,450,289,458,281,468,282,477,285,485,293,484,297,493,302,498,302,506,305,513,313,518,323,521,328,519,330,527,337,530,337,523,338,511,345,509,353,507,364,505,369,509,375,505,383,500,392,498,393,491,398,486,388,480,380,476,379,468,375,461,375,451,376,444,368,442,366,436,370,431,379,430,386,427,386,423,379,424,372,417,369,413,361,418,363,426,357,432,356,438,358,446,354,452,346,453,338,450,334,445,334,440,330,433,326,426,318,420,314,413,311,409,305,412,302,406,297,408,298,413" href="/destination/show_province_map.asp?ProvinceCode=29"> <area shape="poly" coords="288,330,288,338,286,347,289,353,295,362,302,369,305,383,303,395,303,402,300,408,308,412,316,415,320,423,327,428,332,436,335,444,340,451,347,452,356,450,357,444,357,435,361,427,364,419,370,415,377,423,385,424,393,426,401,426,394,419,398,421,391,414,393,409,394,402,389,393,388,382,392,377,400,382,407,378,411,372,417,364,418,358,413,352,408,349,397,347,389,349,380,349,374,343,365,333,359,328,352,327,349,333,347,339,339,335,336,341,333,347,324,347,315,348,308,342,303,336,297,331" href="/destination/show_province_map.asp?ProvinceCode=09"> <area shape="poly" coords="284,188,290,189,297,192,300,200,301,209,302,217,305,223,313,226,321,224,327,225,325,231,321,238,328,243,335,249,338,257,346,257,351,251,359,251,370,248,370,254,366,262,364,270,370,275,376,275,385,282,389,290,391,300,396,307,403,303,405,298,400,290,402,281,408,276,412,275,409,283,415,288,423,289,428,293,425,300,426,307,419,308,415,314,404,313,400,323,402,333,394,337,394,346,386,350,378,347,372,341,362,333,354,329,349,336,342,337,334,336,332,329,334,323,345,324,347,316,354,307,358,301,357,291,350,280,343,273,332,267,318,259,306,253,295,251,289,257,278,256,270,248,256,243,247,242,243,236,242,229,245,221,256,217,262,211,269,207,279,206,282,197" href="/destination/show_province_map.asp?ProvinceCode=11"> <area shape="poly" coords="300,192,307,195,319,194,332,196,342,198,354,204,364,207,374,211,383,212,394,208,402,205,412,200,428,199,437,198,448,190,454,183,458,178,454,166,459,157,466,162,476,159,482,150,492,147,500,144,506,137,519,130,530,128,534,123,523,114,514,115,508,120,503,117,493,119,488,109,492,96,498,85,511,81,519,76,524,64,527,50,525,38,527,31,537,26,538,35,538,41,545,40,551,44,552,52,564,52,574,43,579,47,581,60,578,70,581,78,583,89,584,96,575,91,572,100,567,108,568,115,573,119,577,123,574,127,571,133,563,132,560,138,565,146,567,155,572,160,578,154,582,161,586,168,585,175,579,177,570,183,562,193,553,197,546,190,543,197,548,203,544,209,537,209,534,205,527,193,519,194,518,200,511,203,506,208,499,212,494,208,493,201,487,206,484,213,485,221,487,226,477,231,465,234,462,238,458,243,447,246,438,252,432,262,430,272,422,272,413,273,407,269,402,264,405,252,398,251,396,260,392,267,385,271,378,273,369,275,366,264,370,255,374,249,363,250,353,252,347,257,339,256,333,247,327,243,323,238,328,229,318,225,309,224,301,215,300,204,299,193" href="/destination/show_province_map.asp?ProvinceCode=18"> <area shape="poly" coords="406,253,403,260,404,267,411,273,406,277,401,286,403,295,402,304,396,304,391,298,390,289,384,283,380,278,375,275,385,272,392,267,393,262,395,258,396,255,400,251,403,251" href="/destination/show_province_map.asp?ProvinceCode=23"> <area shape="poly" coords="418,355,429,352,433,356,441,360,442,353,446,347,442,342,448,339,456,340,459,335,455,327,454,319,449,311,451,303,448,295,447,283,451,276,450,267,452,261,453,252,456,248,450,245,443,249,435,255,432,267,427,272,419,272,412,276,409,284,415,287,424,291,429,295,425,300,425,307,417,311,410,315,402,317,400,327,399,336,394,337,395,345,400,348,405,351" href="/destination/show_province_map.asp?ProvinceCode=25"> <area shape="poly" coords="427,354,436,359,442,363,448,367,449,374,443,379,433,379,427,386,432,392,434,400,440,405,440,414,439,419,435,413,429,407,424,402,416,405,410,411,403,412,397,411,394,405,389,395,389,384,395,380,405,380,411,375,417,368,418,361,420,356" href="/destination/show_province_map.asp?ProvinceCode=04"> <area shape="poly" coords="380,469,387,467,394,470,399,473,405,469,409,463,417,458,423,463,432,461,439,457,445,452,443,446,441,437,435,434,440,430,442,423,438,417,432,412,427,402,419,401,412,410,403,411,393,408,393,415,398,422,394,427,388,424,383,430,373,430,368,438,373,444,374,449,375,457,373,465" href="/destination/show_province_map.asp?ProvinceCode=13"> <area shape="poly" coords="398,499,406,501,405,510,412,518,423,520,431,521,434,518,439,524,446,522,449,516,458,508,463,503,471,494,475,483,479,473,470,469,466,464,469,457,464,450,455,448,447,450,441,453,433,462,424,463,415,460,408,467,399,473,389,468,381,470,382,478,390,482,397,488,393,495" href="/destination/show_province_map.asp?ProvinceCode=12"> <area shape="poly" coords="446,572,454,568,459,563,462,558,466,550,466,543,459,542,451,545,443,546,439,553,437,560,437,567" href="/destination/show_province_map.asp?ProvinceCode=17"> <area shape="poly" coords="459,537,455,528,466,522,477,518,486,518,491,512,495,507,499,507,505,501,509,505,513,508,514,503,518,498,521,497,526,500,534,499,541,494,546,485,551,480,547,472,538,465,524,468,514,471,513,467,516,459,505,459,494,458,489,465,480,467,477,478,472,489,467,500,457,508,448,517,447,529,452,538,455,541" href="/destination/show_province_map.asp?ProvinceCode=08"> <area shape="poly" coords="603,502,605,494,606,486,611,479,611,469,614,461,612,452,606,448,600,456,598,463,592,473,593,481,590,490,596,495" href="/destination/show_province_map.asp?ProvinceCode=34"> <area shape="circle" coords="497,513,5" href="/destination/show_province_map.asp?ProvinceCode=33"> <area shape="circle" coords="520,502,5" href="/destination/show_province_map.asp?ProvinceCode=32"> <area shape="poly" coords="467,460,468,467,473,470,480,471,486,467,491,463,498,458,504,459,506,451,503,440,498,426,501,418,504,410,498,400,489,394,480,395,468,391,459,388,452,393,445,397,440,404,440,414,442,426,437,435,441,442,444,450,450,448,462,450,467,454,455,449" href="/destination/show_province_map.asp?ProvinceCode=19"> <area shape="poly" coords="508,459,515,458,514,466,516,470,527,467,538,467,534,458,536,446,541,436,545,429,547,422,551,417,559,412,561,406,557,397,555,389,548,387,542,383,537,389,535,382,530,385,522,387,513,393,507,396,502,398,503,408,500,419,501,431,502,441,506,449" href="/destination/show_province_map.asp?ProvinceCode=22"> <area shape="poly" coords="556,478,563,472,571,462,575,454,581,449,582,441,580,432,584,426,590,421,578,420,568,416,565,408,556,413,548,421,541,434,539,444,536,454,536,465,543,470,549,476,552,481" href="/destination/show_province_map.asp?ProvinceCode=07"> <area shape="poly" coords="588,420,591,412,598,406,602,402,602,391,606,384,601,382,600,379,604,378,598,373,590,372,581,374,567,373,562,384,555,390,557,399,563,408,566,415,577,418" href="/destination/show_province_map.asp?ProvinceCode=05"> <area shape="poly" coords="592,369,597,365,600,359,596,353,591,350,587,354,587,363" href="/destination/show_province_map.asp?ProvinceCode=01"> <area shape="poly" coords="588,370,579,374,566,374,569,368,569,362,558,357,555,348,563,340,562,335,553,338,547,329,539,324,530,319,527,312,528,306,537,310,545,311,551,308,557,301,565,309,575,315,580,324,586,335,596,342,595,349,589,354,589,362" href="/destination/show_province_map.asp?ProvinceCode=06"> <area shape="poly" coords="563,385,567,373,570,364,560,358,554,348,562,342,563,336,553,338,546,327,534,322,527,313,523,313,526,322,522,326,516,320,516,328,512,335,511,344,518,349,523,356,517,363,523,367,523,376,528,382,536,382,539,387,545,383,552,389" href="/destination/show_province_map.asp?ProvinceCode=10"> <area shape="poly" coords="534,384,527,379,522,368,518,360,508,360,501,358,492,350,477,349,463,344,461,337,452,340,443,342,444,349,440,360,448,368,446,380,435,379,429,386,432,394,439,405,447,397,465,391,458,388,475,394,485,396,497,397,502,403,503,409,506,398,515,393,524,387" href="/destination/show_province_map.asp?ProvinceCode=20"> <area shape="poly" coords="522,356,515,347,511,338,515,329,516,320,523,325,525,318,521,313,510,311,507,303,511,297,507,293,493,292,490,298,480,305,469,310,460,313,454,323,459,334,462,343,472,349,482,351,493,353,503,358,511,360" href="/destination/show_province_map.asp?ProvinceCode=14"> <area shape="poly" coords="543,309,555,305,562,297,570,286,578,279,586,272,593,266,587,260,574,259,564,260,561,267,555,268,549,261,541,258,534,260,528,263,515,273,510,283,509,292,509,297,507,305,512,312,525,313,528,309" href="/destination/show_province_map.asp?ProvinceCode=27"> <area shape="poly" coords="489,296,489,287,488,278,492,269,487,261,485,251,492,246,491,237,485,230,473,232,463,236,456,245,452,258,452,275,446,285,449,295,451,304,449,314,454,319,462,310,471,311,482,305" href="/destination/show_province_map.asp?ProvinceCode=26"> <area shape="poly" coords="506,292,494,290,487,284,491,275,487,262,488,250,492,243,486,231,487,225,487,211,493,201,500,211,512,205,518,197,527,194,532,202,540,210,546,218,554,223,551,230,551,236,550,242,544,241,538,244,534,238,531,231,526,225,519,217,512,218,508,226,504,238,512,235,522,240,524,249,531,251,535,256,533,262,522,268,514,276,512,286" href="/destination/show_province_map.asp?ProvinceCode=15"> <area shape="poly" coords="543,25,554,21,563,24,579,30,570,24,583,37,589,46,597,55,604,65,614,71,627,71,636,76,643,85,656,84,665,79,674,70,681,70,684,81,683,94,682,112,676,126,663,130,670,144,672,153,660,149,651,153,642,154,634,145,628,148,616,140,605,137,597,137,584,138,579,128,575,123,569,118,566,111,572,102,576,92,584,96,582,82,578,65,578,46,570,46,553,52,563,52,552,45,542,41,538,42,535,38,537,28" href="/destination/show_province_map.asp?ProvinceCode=16"> <area shape="poly" coords="663,173,669,163,672,154,659,149,645,153,631,146,619,142,606,136,592,137,577,127,569,133,561,137,566,151,573,161,579,156,585,163,592,169,600,174,608,181,612,191,615,197,623,201,627,193,634,193,644,192,641,179,651,177,656,168,658,165" href="/destination/show_province_map.asp?ProvinceCode=21"> <area shape="poly" coords="576,243,583,240,590,230,602,225,607,218,615,211,620,204,611,196,609,182,600,173,588,168,583,177,572,184,560,194,549,195,544,198,547,206,542,210,549,219,554,225,554,230,560,223,571,215,580,218,575,226,578,236" href="/destination/show_province_map.asp?ProvinceCode=30"> <area shape="poly" coords="532,254,537,245,535,237,530,230,523,234,516,236,523,245" href="/destination/show_province_map.asp?ProvinceCode=03"> <area shape="poly" coords="515,237,507,238,508,230,513,219,520,219,527,226,524,233,529,230" href="/destination/show_province_map.asp?ProvinceCode=02"> </map>

来源：(http://blog.sina.com.cn/s/blog_55e42da60100hfyu.html) - html中的Map,area标签详解_朱仁_新浪博客