您的位置：首页 > Web前端 > HTML

HTML中map及area标签定位使用

2018-03-05 10:34 731 查看

1.重点内容

图片和热点区域元素关联是使用图片的usemap属性，其值对应的id或者name值（Chrome浏览器只支持name属性值关联）。

这里出现了两个HTML标签，一个是还有一个是，这些都是从很早就支持的HTML标签，所以不必担心兼容性问题。其中就闭合特性来看，类似，是无法有子元素或其他子内容的。

2.这里出现了几个属性：

shape

shape表示点击热点区域的形状，支持矩形rect，圆形circle以及多边形poly。

coords

coords表示点击热点区域形状的坐标。坐标点0,0表示图片的左上角。

1.矩形rect支持4个数值，2个坐标，分别是矩形左上角坐标和矩形右下角坐标。例如，coords=”20,20,80,80”生成的就是一个左上角坐标20,20宽高都是60px的矩形区域。

2.圆形circle支持3个数值，前2个值为圆心坐标，第3个值为圆的半径大小。

3.多边形poly就更简单了，每两个数值组合表示一个坐标点，依次连线形成的区域就是最终的热点区域。

href

href和<a>元素的href是一样的东西，直接跳转地址，或者锚点等。也同样支持target属性和rel属性。也就是说<area>可以看成是半个<a>元素。

alt

alt同元素的alt，表示热点区域图片的描述信息。

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
一、
图片和热点区域元素关联是使用图片的usemap属性，
其值对应<map>的id或者name值（Chrome浏览器只支持name属性值关联）。
二、去除点击边框：
1.map area{ outline: none; }
2.area标签中onfocus="blur(this)"
三、area标签属性
shape
shape表示点击热点区域的形状，支持矩形rect，圆形circle以及多边形poly。
coords
coords表示点击热点区域形状的坐标。坐标点0,0表示图片的左上角。
1.矩形rect支持4个数值，2个坐标，分别是矩形左上角坐标和矩形右下角坐标。例如，coords="20,20,80,80"生成的就是一个左上角坐标20,20宽高都是60px的矩形区域。
2.圆形circle支持3个数值，前2个值为圆心坐标，第3个值为圆的半径大小。
3.多边形poly就更简单了，每两个数值组合表示一个坐标点，依次连线形成的区域就是最终的热点区域。
href
href和<a>元素的href是一样的东西，直接跳转地址，或者锚点等。也同样支持target属性和rel属性。也就是说<area>可以看成是半个<a>元素。
alt
alt同<img>元素的alt，表示热点区域图片的描述信息。
-->
<img src="images/mm1.jpg" alt="美女" usemap="#MM">
<map id="MM" name="MM">
<area shape="rect"   coords="20,20,80,80" href="#rect" title="矩形" att="矩形">
<area shape="circle" coords="200,50,50" href="#circle" title="圆形" alt="圆形">
<area shape="poly" coords="150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href="#poly" title="多边形" alt="多边形">
</map>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML中map及area标签定位使用

相关文章推荐

新的分享

章节导航