介绍
这篇文章主要介绍了html中地图上标签是什么,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
首先让我们来看一下html地图标签是什么:
<强> html地图标签:定义一个客户端图像映射。图像映射(映象)指带有可点击区域的一幅图像。
定义地图:
& lt;地图id=癷m_map"name=癷m_map"比;
& lt;区域形状=皉ect"坐标=?,0100100,href=https://www.yisu.com/zixun/" url.html "/>
地图标签定义地图,区域标签定义可点击的热点,区域属性;
形状:定义热点形状,可选参数矩形(矩形),圆(圆形),poligon(自定义形状).
坐标:定义形状路径;
当形状=矩形时,四个数字依次为:起点X,起点Y,终点X,终点Y
当形状=圆时,三个数字依次为:中心点X中心点Y,半径
=poligon当形状时,可定义多个路径点,依次为:起点X,起点Y,路径1 X,路径1 Y,路径2 X,路径2 Y……
href定义点击跳转的地址。
<强> html地图标签必需的属性:
id: unique_name:为地图标签定义唯一的名称。
<强> html地图标签可选的属性:
名称:mapname:为映象规定的名称。
<强>地图标签在html中的结构:
1,坐标的对应坐标不用变,只需在JS里面改变其比例就OK !
& lt; div类=癿ap_img"比;
& lt; img类=癿apImg"usemap=癿apName"src=癷sphoto/abc.png"alt=?“风格=翱矶?450 px"比;
& lt;地图名称=癿apName"祝辞
& lt; !——方形区域写法——比;
& lt; !——& lt;区域形状=皉ect"坐标=?05250660305”;目标=癬blank"href=癹avascript:警报(1);“alt=啊?比;——比;
& lt;区域形状=癱ircle"坐标=?633276年,28“;目标=癬blank"href=癹avascript:警报(& # 39;汽车图标& # 39;);“alt=啊?比;
& lt;/map>
& lt;/div> 2,如果有多张图片,一张图片对应一个地图,类不用变,改变地图的名称值和对应的usemap值就好. name=usemap他们俩是一对CP哦,不要分开它们,给他们一样的值。
& lt; div类=癿ap_img"比;
& lt; img类=癿apImg"usemap=癿apName"src=癷sphoto/abc.png"alt=?“风格=翱矶?450 px"比;
& lt;地图名称=癿apName"祝辞
& lt;区域形状=癱ircle"坐标=?633276年,28“;目标=癬blank"href=癹avascript:警报(& # 39;汽车图标& # 39;);“alt=啊?比;
& lt;/map>
& lt; !——一张图片对应一个名字和usemap——比;
& lt; img类=癿apImg"usemap=癿apName2"src=癷sphoto/abc.png"alt=?“风格=翱矶?450 px"比;
& lt;地图名称=癿apName2"祝辞
& lt;区域形状=癱ircle"坐标=?633276年,28“;目标=癬blank"href=癹avascript:警报(& # 39;第二张图的汽车图标& # 39;);“alt=啊?比;
& lt;/map>
& lt;/div> <强> html
用法如下:
& lt; img src=https://www.yisu.com/zixun/皃lanets.gif”alt="无法显示此图像“usemap=" # planetmap "/>
<地图id=" planetmap " name=" planetmap ">
<区域形状=熬匦巍弊?" 0 0 82126 " href="太阳。htm " alt="太阳"/>
<区域形状="圆"坐标=" 90年,58岁的3 " href=" mercur。水星htm " alt=" "/>
<区域形状="圆"坐标=" 124年,58岁的8 " href="金星。金星htm " alt=" "/>
usemap属性获取& lt; map>标签信息,& lt; area>标签定义一个链接区域,形状属性定义区域形状,坐标属性定义链接区域的起点坐标和终点坐标
注释:面积元素永远嵌套在图元素内部.area元素可定义图像映射中的区域。
注释:& lt; img>中的usemap属性可引用& lt; map>中的id或名称属性(取决于浏览器),所以我们应同时向& lt; map>添加id和名称属性。
感谢你能够认真阅读完这篇文章,希望小编分享html中地图上标签是什么内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
