HTML map标签

最新推荐文章于 2022-11-11 23:41:01 发布
最新推荐文章于 2022-11-11 23:41:01 发布
阅读量250 收藏
点赞数
分类专栏： 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
关注
专栏目录
HTML ＜map＞ 标签
玄链教育
07-09 981
定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。
图像的影像地图超链接（热点区域），map标签浅谈
12-14
在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。 这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。
html 读取map,HTML <map> 标签 | 菜鸟教程
weixin_30775883的博客
06-30 585
HTML 标签实例带有可点击区域的图像映射：width="145" height="126"alt="Planets"usemap="#planetmap">name="planetmap">尝试一下 »浏览器支持目前大多数浏览器支持 标签。标签定义及使用说明 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。中的 usemap 属性可引用 中的 id 或 name 属性...
html中map标签的用法,HTML中的map和area标签
weixin_39678451的博客
06-26 1207
1. 标签介绍：(1)map标签： 该标签是指图片的映射，也就是说一张可以点击的图片的映射；属性介绍：<1> id: 中的 usemap 属性可引用 中的 id 或 name 属性(取决于浏览器)<2>name:同上说明：不同的浏览器会根据img中的usemap属性去引用ID或者name值，所以最好使用的时候这两个属性都要加上。(2)area标签：指的是图片映射的区域，可...
html -- map标签
fupo
12-23 2551
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标签
亮星空
07-01 598
图像的影像地图超链接，&lt;map&gt;标签浅谈 在HTML中还可以把图片划分成多个热点区域，每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域，再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签：&lt;img&gt;&lt;map&gt;&lt;area&gt;下面分别介绍这些标签的用法：    影像地图（Image Map）标签...
html map标签详解
qq_35301644的博客
12-11 2835
map标签的用途： 是与img标签绑定使用的，常被用来赋予给客户端图像某处区域特殊的含义，点击该区域可跳转到新的文档。 因为map标签是与img标签绑定使用的，所以我们需要给map标签添加ID和name属性，让img标签中的usemap属性引用map标签中的id或者name属性（由于浏览器的不同，usemap属性接收二者之一的值，所以通常name和id属性二者都写，值相同），并配合area标签进行...
HTML map 标签使用详解
m0_67402125的博客
04-03 1147
在图片中标注usemap： <img src=""img.jpg" usemap="im_map" /> 定义map： <map id="im_map" name="im_map"> <area shape="rect" coords="0,0,100,100" href="url.html" /> </map map标签定义map，area标签定义可点击的热点，area属性： shape：定义热点形状，可选参数 rect(矩形)、circle(圆形)、poli
HTML map标签与area标签 图片热区 使用说明
coderwwh的博客
08-10 3013
有时提供了一张图,需要在图片具体位置做点击操作,这时候用热区图是最好的选择,是与img标签绑定使用的，常被用来赋予给客户端图像某处区域特殊的含义，点击该区域可跳转到新的文档。
HTML5中的map标签——＜map＞
YuWo_lh的博客
11-11 1849
标签描述定义图像的标签定义带有可点击区域的图像映射标签定义图像中单个的可点击的区域定义媒介内容的分组，以及他们的标题定义figure元素的标题其中标红部分为重要部分img标签
html map 标签使用
06-27
### HTML `map` 标签使用详解 #### 一、引言 HTML（HyperText Markup Language）是构成网页的基础语言之一，在网页设计与开发中扮演着至关重要的角色。`<map>`标签作为HTML中的一个重要组成部分，主要用于定义图像...
JSP学生学籍管理系统设计与实现(源代码+论文+开题报告+外文翻译+答辩PPT).zip
09-21
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
省市区数据，完成三级联动，选择地区
09-21
省市区数据，完成三级联动，选择地区
机械原理课程设计网球自动捡球机.doc
最新发布
09-21
机械原理课程设计网球自动捡球机.doc
2024秋招华为笔试题大全-仅供参考具体需要根据实际修改
09-21
2024秋招华为笔试题大全-仅供参考具体需要根据实际修改
借助于Ascend310 AI处理器完成深度学习算法部署任务，
09-21
应用背景为变电站电力巡检，基于YOLO v4算法模型对常见电力巡检目标进行检测，并充分利用Ascend310提供的DVPP等硬件支持能力来完成流媒体的传输、处理等任务，并对系统性能做出一定的优化。.zip深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
基于深度学习的物体识别与抓取方法，六自由度机械臂，python编写程序.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
电子设计论文文档资料液面检测器电子设计论文文档资料液面检测器
09-21
电子设计论文文档资料液面检测器电子设计论文文档资料液面检测器
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、付费专栏及课程。

余额充值