`
steely816
  • 浏览: 126694 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

HTML map标签

HTML360 
阅读更多

在Html中，给图像使用map标签，可以给图像的某个部分建立超连接，用法如下：

Java代码
  1. <img src=img.gif usemap= "MAP-Name" >  
  2. <map name="MAP-Name" >  
  3. <area shape="rect|circle|poly"  coords= "#"  href= "url" >  
  4. </map>   
<img src=img.gif usemap="MAP-Name">
<map name="MAP-Name">
<area shape="rect|circle|poly" coords="#" href="url">
</map>

注:所有的坐标都是相对于图片左上角的

其中，坐标coords对各个shape的解释如下：

Java代码
  1. shape= "rect"  coords= "x1,y1,x2,y2"   // (x1,y1)=Upper Left, (x2,y2)=Lower Right     
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)及半径

Java代码
  1. 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..." // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...



即，当shape是poly多边形时，coords表示多边形所有顶点的坐标(x1,y1),(x2,y2),(x3,y3)...


注意：以上所有坐标都是相对于图形img.gif左上脚坐标而言的


以下是一个例子:

Java代码
  1. <img src= "mapimg.gif"  usemap= "#Face" >  
  2. <map name="Face" >  
  3.    <area shape="rect"  href= "page.html"  coords= "140,20,280,60" >  
  4.    <area shape="poly"  href= "image.html"  coords= "100,100,180,80,200,140" >  
  5.    <area shape="circle"  href= "new.html"  coords= "80,100,60" >  
  6. </map>   
<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网站中摘下来的一个实例：

Java代码
  1. <html>  
  2.     <body>  
  3.   <div align="center" ><img src= "city_map.gif"  width= "740"  height= "595"  border= "0"  usemap= "#Map" >  
  4. <map name="Map" >  
  5.   <area shape="rect"  coords= "613,103,659,129"  href= "http://hao.360.cn/daxue/hlj.html"  title= "黑龙江"  target= "_blank" >  
  6.   <area shape="rect"  coords= "604,153,641,172"  href= "http://hao.360.cn/daxue/jl.html"  title= "吉林"  target= "_blank" >  
  7. <area shape="rect"  coords= "584,180,609,210"  href= "http://hao.360.cn/daxue/ln.html"  title= "辽宁"  target= "_blank" >  
  8. <area shape="rect"  coords= "411,208,472,228"  href= "http://hao.360.cn/daxue/nm.html"  title= "内蒙"  target= "_blank" >  
  9. <area shape="rect"  coords= "507,205,541,229"  href= "http://hao.360.cn/daxue/bj.html"  title= "北京"  target= "_blank" >  
  10. <area shape="rect"  coords= "524,230,566,248"  href= "http://hao.360.cn/daxue/tj.html"  title= "天津"  target= "_blank" >  
  11. <area shape="rect"  coords= "489,237,525,263"  href= "http://hao.360.cn/daxue/hebei.html"  title= "河北"  target= "_blank" >  
  12. <area shape="rect"  coords= "526,271,567,290"  href= "http://hao.360.cn/daxue/sd.html"  title= "山东"  target= "_blank" >  
  13. <area shape="rect"  coords= "454,261,486,284"  href= "http://hao.360.cn/daxue/sx1.html"  title= "山西"  target= "_blank" >  
  14. <area shape="rect"  coords= "381,250,412,284"  href= "http://hao.360.cn/daxue/nx.html"  title= "宁夏"  target= "_blank" >  
  15. <area shape="rect"  coords= "318,282,350,310"  href= "http://hao.360.cn/daxue/qh.html"  title= "青海"  target= "_blank" >  
  16. <area shape="rect"  coords= "362,291,389,326"  href= "http://hao.360.cn/daxue/gs.html"  title= "甘肃"  target= "_blank" >  
  17. <area shape="rect"  coords= "409,319,445,348"  href= "http://hao.360.cn/daxue/sx2.html"  title= "陕西"  target= "_blank" >  
  18. <area shape="rect"  coords= "476,313,512,341"  href= "http://hao.360.cn/daxue/henan.html"  title= "河南"  target= "_blank" >  
  19. <area shape="rect"  coords= "527,344,558,377"  href= "http://hao.360.cn/daxue/ah.html"  title= "安徽"  target= "_blank" >  
  20. <area shape="rect"  coords= "558,328,585,356"  href= "http://hao.360.cn/daxue/js.html"  title= "江苏"  target= "_blank" >  
  21. <area shape="rect"  coords= "591,341,631,370"  href= "http://hao.360.cn/daxue/sh.html"  title= "上海"  target= "_blank" >  
  22. <area shape="rect"  coords= "564,371,597,403"  href= "http://hao.360.cn/daxue/zj.html"  title= "浙江"  target= "_blank" >  
  23. <area shape="rect"  coords= "605,431,645,461"  href= "http://hao.360.cn/daxue/tw.html"  title= "台湾"  target= "_blank" >  
  24. <area shape="rect"  coords= "194,374,239,395"  href= "http://hao.360.cn/daxue/xz.html"  title= "西藏"  target= "_blank" >  
  25. <area shape="rect"  coords= "348,351,380,387"  href= "http://hao.360.cn/daxue/sc.html"  title= "四川"  target= "_blank" >  
  26. <area shape="rect"  coords= "394,379,433,403"  href= "http://hao.360.cn/daxue/cq.html"  title= "重庆"  target= "_blank" >  
  27. <area shape="rect"  coords= "465,365,511,387"  href= "http://hao.360.cn/daxue/hubei.html"  title= "湖北"  target= "_blank" >  
  28. <area shape="rect"  coords= "511,401,542,430"  href= "http://hao.360.cn/daxue/jx.html"  title= "江西"  target= "_blank" >  
  29. <area shape="rect"  coords= "466,408,498,439"  href= "http://hao.360.cn/daxue/hunan.html"  title= "湖南"  target= "_blank" >  
  30. <area shape="rect"  coords= "397,418,433,454"  href= "http://hao.360.cn/daxue/gz.html"  title= "贵州"  target= "_blank" >  
  31. <area shape="rect"  coords= "338,458,367,494"  href= "http://hao.360.cn/daxue/yn.html"  title= "云南"  target= "_blank" >  
  32. <area shape="rect"  coords= "417,471,455,506"  href= "http://hao.360.cn/daxue/gx.html"  title= "广西"  target= "_blank" >  
  33. <area shape="rect"  coords= "492,470,539,494"  href= "http://hao.360.cn/daxue/gd.html"  title= "广东"  target= "_blank" >  
  34. <area shape="rect"  coords= "541,436,583,460"  href= "http://hao.360.cn/daxue/fj.html"  title= "福建"  target= "_blank" >  
  35. <area shape="rect"  coords= "511,497,548,523"  href= "http://hao.360.cn/daxue/xg.html"  title= "香港"  target= "_blank" >  
  36. <area shape="rect"  coords= "481,504,512,537"  href= "http://hao.360.cn/daxue/am.html"  title= "澳门"  target= "_blank" >  
  37. <area shape="rect"  coords= "429,541,470,573"  href= "http://hao.360.cn/daxue/hn.html"  title= "海南"  target= "_blank" >  
  38. <area shape="rect"  coords= "177,155,213,192"  href= "http://hao.360.cn/daxue/xj.html"  title= "新疆"  target= "_blank" >  
  39. </map>  
  40.       </div>  
  41.  </body>  
  42. </html> 
分享到：
| 在Flex/Flash项目中使用TLF（Text Layout ...
评论
1 楼 qishuai 2011-11-17  
不错 正好 用到 百度到了 多谢分享 说的很详细 谢谢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html map 标签使用

    html map 标签使用

    html图像地图map标签的使用

    map标签定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的一幅图像。这是在所有主流浏览器中都可以兼容的一个标签属性。

    Web-前端html+css从入门到精通 117. map标签与area标签.zip

    Web-前端html+css从入门到精通 117. map标签与area标签.zip

    Html image 标签 配合 map使用

    NULL 博文链接：https://zongyukai20070419095606.iteye.com/blog/603698

    map指定区域颜色及划过高亮.zip

    动态改变map-area区域背景色,可滑动改变背景色

    mapstruct-1.2.0.Final-API文档-中文版.zip

    标签：mapstruct、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。

    mapstruct-1.1.0.Final-API文档-中文版.zip

    标签：mapstruct、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。

    mapstruct-1.3.1.Final-API文档-中文版.zip

    标签：mapstruct、jar包、java、中文文档； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。

    mapstruct-1.3.1.Final-API文档-中英对照版.zip

    标签：mapstruct、jar包、java、中英对照文档； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。 ...

    用CSS中的map标签制作单图多区域点击的示例

    map标签 定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。  area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。 img标签中的usemap属性可引用的map标签中的id或name...

    mapstruct-jdk8-1.2.0.Final-API文档-中文版.zip

    标签：mapstruct、jdk8、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用...

    mapstruct-1.1.0.Final-API文档-中英对照版.zip

    标签：mapstruct、中英对照文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。 ...

    mapstruct-1.2.0.Final-API文档-中英对照版.zip

    标签：mapstruct、中英对照文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心使用。 ...

    mapstruct-processor-1.2.0.Final-API文档-中文版.zip

    标签：mapstruct、processor、中文文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心...

    mapstruct-jdk8-1.2.0.Final-API文档-中英对照版.zip

    标签：mapstruct、jdk8、中英对照文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请放心...

    mapstruct-processor-1.2.0.Final-API文档-中英对照版.zip

    标签：mapstruct、processor、中英对照文档、jar包、java； 使用方法：解压翻译后的API文档，用浏览器打开“index.html”文件，即可纵览文档内容。 人性化翻译，文档中的代码和结构保持不变，注释和说明精准翻译，请...

    图像的影像地图超链接（热点区域），map标签浅谈

    在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。 这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。

    image-map-resizer：响应式HTML图像映射

    您可以选择传递一个CSS选择器，该选择器返回地图标签的集合，例如“ map.myMap”。 或直接引用DOM中的地图对象。 此函数返回已绑定到的地图元素数组。 jQuery用法 包括和脚本，然后将以下调用添加到页面底部： $ ...

    Java实现HTML文件转PDF文件

    3、通过JSoup 解析HMTL内容，并动态给HMTL标签内容赋值 //解析HMTL文件并给字符串赋值 urlsource = parseHtml(urlsource, map); 4、把设置发了的HTML文件转化成PDF文件 //把HTML文件转化成PDF文件 htmlToPdf2...

Magicbox
Global site tag (gtag.js) - Google Analytics