织梦模板代理加盟 2020全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

您现在的位置: 麦站网 > 站长学院 > 编程语言 >

HTML:map地图标签的使用方法

来源:本站原创 发布时间:2020-10-08 09:59:32热度:我要评论(0

阿里云云产品优惠

html元素<map>是用于标记带有可点击热点区域的图像,但必须使用<area>标签才能在图像上创建可点击的热点区域,下面,我们就一起来学习吧.

<map> 标签定义

<map> 标签是定义一个带有可点击热点区域的图像,有的地方叫图像映射;

<map> 标签已被所有主流浏览器支持;

<area> 标签始终嵌套在 <map>和</map> 标签之间;

<map> 标签用法

<area>标签用于创建不同形状的图像热点区域,<area>标签永远嵌套在<map>和</map>标签之间。

<img src="image.jpg" usemap="#mymap" />
<map name="mymap" id="mymap" >
<area shape="rect"  coords="25,30,131,131"  href="a.html" target="_blank" >
<area shape="circ"  coords="200,75,46"  href="b.html" target="_blank">
<area shape="poly"  coords="52,207,137,155,210,225,168,317,70,304"  href="c.html" target="_blank">
</map>

<img>标签中的usermap="#mymap"属性中的mymap必须和<map>标签中name和id属性值中的mymap名称相同;

以上代码在浏览器中显示出现,我们只要点击图像上的矩形、圆形、多边形热点区域,就可以分别跳转至相应的a.html、b.html、c.html页面,动画效果演示如下:

acronym.gif

<area> 标签中的coords属性是设置热点区域坐标位置的,它可以设置三种不同热点区域形状,分别是rect(矩形)、circ(圆形)、poly(任意多边形):

1、创建矩形热点(rect):

<area shape="rect" coords="x1,y1,x2,y2" href="url" />

其中,shape="rect"是创建矩形热点,对应的coords="x1,y1,x2,y2",而x1,y1是矩形热点的左上角坐标,x2,y2是矩形热点的右下角坐标;

 

2、创建圆形热点(circ):

<area shape="circ" coords="x1,y1,r" href=url  />

其中,shape="circ"是创建圆形热点,对应的coords="x1,y1,r",而x1,y1是圆形热点的圆心坐标,r是圆形热点的半径长度;

 

3、创建任意多边形热点(poly):

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,....." href=url />

其中,shape="poly"是创建多边形热点,对应的coords="x1,y1,x2,y2,x3,y3,.....",而x1,y1是多边形热点的一个点坐标,依次是第二个点坐标x2,y2,第三个点坐标x3,y3,第N个点坐标;由于浏览器会自动闭合多边形,所以尾部坐标不必与第一个坐标相等。任意多个点可创建形状不同的多边形图形。

如果某个<area>标签中的坐标和其他<area>标签创建的热点区域发生了重叠,会优先采用最先出现的 <area>标签,浏览器就会忽略超过图像边界范围之外的坐标。

 

shape属性值相关说明:

1、设置矩形的shape属性值,可以是缩写词rect,也可以是全称rectangle;

2、设置圆形的shape属性值,可以是缩写词circ,也可以是全称circle;

3、设置多边形的shape属性值,可以是缩写词poly,也可以是全称polygon;

 

<map> 标签属性

属性 描述
id unique_name 为 map 标签定义唯一的名称。
name mapname 为 image-map 规定的名称。

 

转载请注明来源网址:https://www.xiuzhanwang.com/bcyy/2731.html

    上一篇:HTML5:video标签代码写法及使用方法

    下一篇:没有了

    发表评论

    评论列表(条)