在Html中，给图像使用map标签，可以给图像的某个部分建立超连接，用法如下：
<img src=img.gif usemap="MAP-Name">
<map name="MAP-Name">
<area shape="rect|circle|poly" coords="#" href="url">
</map>
注:所有的坐标都是相对于图片左上角的
其中，坐标coords对各个shape的解释如下：
shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right
即，当shape是矩形时，coords表示矩形左上及右下(x2, y2)的坐标
引用
shape="circle" coords="x,y,r" // (x,y)=Center, r=Radius
即，当shape是圆形时，coords表示圆中心点坐标(x, y)及半径
shape="poly" coords="x1,y1,x2,y2,x3,y3..." // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...
即，当shape是poly多边形时，coords表示多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...
注意：以上所有坐标都是相对于图形img.gif左上脚坐标而言的
以下是一个例子:
<img src="mapimg.gif" usemap="#Face">
<map name="Face">
<area shape="rect" href="page.html" coords="140,20,280,60">
<area shape="poly" href="image.html" coords="100,100,180,80,200,140">
<area shape="circle" href="new.html" coords="80,100,60">
</map>
下面是从360网站中摘下来的一个实例：
<html>
<body>
<div align="center"><img src="city_map.gif" width="740" height="595" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="613,103,659,129" href="http://hao.360.cn/daxue/hlj.html" title="黑龙江" target="_blank">
<area shape="rect" coords="604,153,641,172" href="http://hao.360.cn/daxue/jl.html" title="吉林" target="_blank">
<area shape="rect" coords="584,180,609,210" href="http://hao.360.cn/daxue/ln.html" title="辽宁" target="_blank">
<area shape="rect" coords="411,208,472,228" href="http://hao.360.cn/daxue/nm.html" title="内蒙" target="_blank">
<area shape="rect" coords="507,205,541,229" href="http://hao.360.cn/daxue/bj.html" title="北京" target="_blank">
<area shape="rect" coords="524,230,566,248" href="http://hao.360.cn/daxue/tj.html" title="天津" target="_blank">
<area shape="rect" coords="489,237,525,263" href="http://hao.360.cn/daxue/hebei.html" title="河北" target="_blank">
<area shape="rect" coords="526,271,567,290" href="http://hao.360.cn/daxue/sd.html" title="山东" target="_blank">
<area shape="rect" coords="454,261,486,284" href="http://hao.360.cn/daxue/sx1.html" title="山西" target="_blank">
<area shape="rect" coords="381,250,412,284" href="http://hao.360.cn/daxue/nx.html" title="宁夏" target="_blank">
<area shape="rect" coords="318,282,350,310" href="http://hao.360.cn/daxue/qh.html" title="青海" target="_blank">
<area shape="rect" coords="362,291,389,326" href="http://hao.360.cn/daxue/gs.html" title="甘肃" target="_blank">
<area shape="rect" coords="409,319,445,348" href="http://hao.360.cn/daxue/sx2.html" title="陕西" target="_blank">
<area shape="rect" coords="476,313,512,341" href="http://hao.360.cn/daxue/henan.html" title="河南" target="_blank">
<area shape="rect" coords="527,344,558,377" href="http://hao.360.cn/daxue/ah.html" title="安徽" target="_blank">
<area shape="rect" coords="558,328,585,356" href="http://hao.360.cn/daxue/js.html" title="江苏" target="_blank">
<area shape="rect" coords="591,341,631,370" href="http://hao.360.cn/daxue/sh.html" title="上海" target="_blank">
<area shape="rect" coords="564,371,597,403" href="http://hao.360.cn/daxue/zj.html" title="浙江" target="_blank">
<area shape="rect" coords="605,431,645,461" href="http://hao.360.cn/daxue/tw.html" title="台湾" target="_blank">
<area shape="rect" coords="194,374,239,395" href="http://hao.360.cn/daxue/xz.html" title="西藏" target="_blank">
<area shape="rect" coords="348,351,380,387" href="http://hao.360.cn/daxue/sc.html" title="四川" target="_blank">
<area shape="rect" coords="394,379,433,403" href="http://hao.360.cn/daxue/cq.html" title="重庆" target="_blank">
<area shape="rect" coords="465,365,511,387" href="http://hao.360.cn/daxue/hubei.html" title="湖北" target="_blank">
<area shape="rect" coords="511,401,542,430" href="http://hao.360.cn/daxue/jx.html" title="江西" target="_blank">
<area shape="rect" coords="466,408,498,439" href="http://hao.360.cn/daxue/hunan.html" title="湖南" target="_blank">
<area shape="rect" coords="397,418,433,454" href="http://hao.360.cn/daxue/gz.html" title="贵州" target="_blank">
<area shape="rect" coords="338,458,367,494" href="http://hao.360.cn/daxue/yn.html" title="云南" target="_blank">
<area shape="rect" coords="417,471,455,506" href="http://hao.360.cn/daxue/gx.html" title="广西" target="_blank">
<area shape="rect" coords="492,470,539,494" href="http://hao.360.cn/daxue/gd.html" title="广东" target="_blank">
<area shape="rect" coords="541,436,583,460" href="http://hao.360.cn/daxue/fj.html" title="福建" target="_blank">
<area shape="rect" coords="511,497,548,523" href="http://hao.360.cn/daxue/xg.html" title="香港" target="_blank">
<area shape="rect" coords="481,504,512,537" href="http://hao.360.cn/daxue/am.html" title="澳门" target="_blank">
<area shape="rect" coords="429,541,470,573" href="http://hao.360.cn/daxue/hn.html" title="海南" target="_blank">
<area shape="rect" coords="177,155,213,192" href="http://hao.360.cn/daxue/xj.html" title="新疆" target="_blank">
</map>
</div>
</body>
</html>
分享到：
相关推荐
html map 标签使用
map标签定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的一幅图像。这是在所有主流浏览器中都可以兼容的一个标签属性。
Web-前端html+css从入门到精通 117. map标签与area标签.zip
NULL 博文链接：https://zongyukai20070419095606.iteye.com/blog/603698
动态改变map-area区域背景色,可滑动改变背景色
标签：mapstruct、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。
标签：mapstruct、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。
标签：mapstruct、jar包、java、中文文档； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。
标签：mapstruct、jar包、java、中英对照文档； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。 ...
map标签 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。 area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。 img标签中的usemap属性可引用的map标签中的id或name...
标签：mapstruct、jdk8、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用...
标签：mapstruct、中英对照文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。 ...
标签：mapstruct、中英对照文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。 ...
标签：mapstruct、processor、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心...
标签：mapstruct、jdk8、中英对照文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心...
标签：mapstruct、processor、中英对照文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请...
在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。 这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。
您可以选择传递一个CSS选择器，该选择器返回地图标签的集合，例如“ map.myMap”。 或直接引用DOM中的地图对象。 此函数返回已绑定到的地图元素数组。 jQuery用法 包括和脚本，然后将以下调用添加到页面底部： $ ...
3、通过JSoup 解析HMTL内容，并动态给HMTL标签内容赋值 //解析HMTL文件并给字符串赋值 urlsource = parseHtml(urlsource, map); 4、把设置发了的HTML文件转化成PDF文件 //把HTML文件转化成PDF文件 htmlToPdf2...