HTML map标签

最新推荐文章于 2021-12-23 23:05:15 发布
最新推荐文章于 2021-12-23 23:05:15 发布
阅读量227 收藏
点赞数
分类专栏： web前端 文章标签： HTML 360
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/steely816/article/details/83845708
版权

在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> 
steely816
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中map标签的用法,HTML中的map和area标签
weixin_39678451的博客
06-26 1159
1. 标签介绍：(1)map标签： 该标签是指图片的映射，也就是说一张可以点击的图片的映射；属性介绍：<1> id: 中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器)<2>name:同上说明：不同的浏览器会根据img中的usemap属性去引用ID或者name值，所以最好使用的时候这两个属性都要加上。(2)area标签：指的是图片映射的区域，可...
HTML标签
weixin_45701868的博客
03-29 1018
目录 一、显示级分类 1、块级元素(block) 2、内联元素(inline) 3、内联块元素(inline-block) 二、文本类型的标签 三、块类型的文本标签 四、超链接 1、属性href: 指定跳转的路径 2、锚点：实现的页内跳转 五、排版类型的标签 1、p标签 2、div标签 3、span标签 4、dl自定义列表 5、有序列表 ​编辑 6、无序列表 7、img图片标签 8、图片映射 六、表单类型的标签 1.input标...
图像的影像地图超链接（热点区域），map标签浅谈
12-14
在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。 这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。
html中的map标签
亮星空
07-01 591
图像的影像地图超链接，&lt;map&gt;标签浅谈 在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签：&lt;img&gt;&lt;map&gt;&lt;area&gt;下面分别介绍这些标签的用法：    影像地图（Image Map）标签...
html 读取map,HTML <map> 标签 | 菜鸟教程
weixin_30775883的博客
06-30 542
HTML 标签实例带有可点击区域的图像映射：width="145" height="126"alt="Planets"usemap="#planetmap">name="planetmap">尝试一下 »浏览器支持目前大多数浏览器支持 标签。标签定义及使用说明 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。中的 usemap 属性可引用 中的 id 或 name 属性...
html -- map标签
fupo
12-23 2467
shape 形状 1. 矩形 rect shape=“rect” coords=“x1,y1,x2,y2” 第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标。“0,0”是图像左上角的坐标。 <area shape="rect" coords="10,50,30,60" href="up" alt="上"> </area> coords="10,50,30,60" 10,50：顶点（左上角）xy坐标 30,60: 对角（右下角）xy坐标 2. 圆形 circle
html map 标签使用
06-27
html map 标签使用
HTML5标签小集
09-28
HTML5是超文本标记语言（HTML）的最新版本，它引入了许多新的标签和特性，旨在使网页设计更加语义化，提高用户体验，并简化开发者的工作。这些标签帮助开发者更清晰地定义网页内容的结构，增强可访问性和搜索引擎...
map标签的参数详细介绍及使用示例
09-28
在HTML中，`<map>`标签用于定义一个客户端图像映射，这是一种创建带有可点击区域的图像的方法。这种技术常用于创建复杂的导航菜单或者交互式的图像，使得用户可以通过点击图像的不同部分来触发不同的操作。`<map>`...
详解 html area标签
09-22
area 元素总是嵌套在 <map> 标签中。本文重点给大家介绍html area标签的相关知识，需要的朋友参考下吧
27-1访问者模式.py
最新发布
06-28
27-1访问者模式.py
经典扫雷游戏（Java版）源代码.zip
06-27
经典扫雷游戏（Java版）源代码 项目：经典扫雷游戏（Java版） 这个经典扫雷游戏是旧版游戏的重制版。在这个版本中，玩家棋盘上布满了地雷，与旧版扫雷游戏类似。整个游戏或项目使用Java和一些NetBeans组件，使其看起来非常出色。玩游戏并享受乐趣吧。 关于项目 如前所述，游戏是用Java制作的。这个游戏非常有趣，您应该知道如何玩。游戏开始时有10个地雷。此外，这个游戏使用NetBeans的Swing组件制作游戏棋盘，游戏经过了良好的验证。这个游戏还使用数据库来保存您的游戏分数。 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
基于matlab-光流法的目标追踪及区域框定源码+高分项目.7z
06-27
基于matlab-光流法的目标追踪及区域框定源码+高分项目.7z 经导师指导并认可通过的高分项目，评审分98分。 主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业的参考资料。 经导师指导并认可通过的高分项目，评审分98分。 主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业的参考资料。 经导师指导并认可通过的高分项目，评审分98分。 主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业的参考资料。 经导师指导并认可通过的高分项目，评审分98分。 主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业的参考资料。 经导师指导并认可通过的高分项目，评审分98分。 主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业的参考资料。 经导师指导并认可通过的高分项目，评审分98分。 主要针对计算机相关专业和需要项目实战练习的学习者，也可作为课程设计、期末大作业的参考资料。
音频剪辑过程中图像处理的细解
06-27
音频剪辑过程中图像处理的细解
JSP学习指导手册或JSP教学资料集
06-27
mysqlJSP编程入门指南 本资源文件为JSP编程的初学者提供了一份全面的学习目录。内容主要包括： JSP入门介绍：简要介绍JSP（JavaServer Pages）的概念和其在Web开发中的重要性。 JSP环境搭建：详细指导读者如何配置计算机环境，以支持JSP的开发和运行。 JSP语法基础：详细解释JSP的基本语法规则，帮助读者理解JSP脚本的基本构成。 JSP内置对象：介绍JSP中预定义的内置对象，如request、response、session等，并说明其在开发中的应用。 JSP常见问题解答：针对JSP开发中常遇到的疑惑和问题，给出解决方案和思路。 JSP扩展资源：涵盖面向对象编程和动态页面等高级话题，为深入学习JSP提供额外资源。 这份指南旨在帮助读者系统地掌握JSP编程的基础知识，为后续的Web开发打下坚实的基础。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
机器学习小组作业-汉字书法识别python源码+文档说明(高分课程设计)
06-27
<项目介绍> 机器学习小组作业-汉字书法识别python源码+文档说明(高分课程设计) - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
PHP语言教程案例，从一个简单的“Hello, World!”程序开始.zip
06-27
PHP语言教程案例，从一个简单的“Hello, World!”程序开始.zip
html map标签如何获得热区域坐标
04-21
可以通过在HTML中的map标签中使用area标签来定义各个热区域，并且使用coords属性来指定该热区域的坐标。例如： <map name="example-map"> ,0,100,100" href="https://www.example.com/1"> ,150,250,250" href=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值