HTML5中map标签小案列

最新推荐文章于 2023-04-25 08:21:14 发布

weixin_45846980

最新推荐文章于 2023-04-25 08:21:14 发布

阅读量241

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/weixin_45846980/article/details/107012338

版权

map标签

name ：给 map 一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。name 属性不准与同文档中的其他 map 元素的值相同，如果 id 属性也被添加， name 属性和 id 属性的值必须相同。这里只列出 HTML5 支持的主要属性。

alt：在未显示图像的浏览器上显示代替的文本字符串。在 HTML5 中, 这个属性只有在 href 属性被使用的时候才是必需的。
shape：相关联的热点的形状。rect，它定义了一个矩形区域； circel，它定义了一个圆形区域； poly，它定义了一个多边形;
coords：给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性。对于矩形或长方形, 这个coords 值为两个X,Y对：左上、右下。对于圆形, 这个值是 x,y,r ，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值.。对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3,等等。HTML4里, 值可能是像素数量或者百分比, 区别是不是有%出现; HTML5里, 只可能是像素的数量。
download：这个属性如果存在的话, 表明作者想把超链接用于下载一个资源。
href：area的超链接, 值为一个URL。 HTML4里, 这个值不管是不是有值都要明确指定出来. HTML5里则不需要。
target：本属性指明了在什么地方显示链接的资源。同 a 标签。
type：该属性指定了用于链接目标的MIME类型的媒体类型。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>maparea</title>
    <style>
      img {
        width: 280px;
        height: 510px;
      }
    </style>
  </head>
  <body>
    <img src="./assets/i/test.jpeg" usemap="#test" />
    <map name="test">
      <area shape="rect" coords="80 60,180 140" href="#rect" alt="矩形" />
      <area shape="circle" coords="125 95,50" href="#rect" alt="圆" />
      <area
        shape="poly"
        coords="120 300,170 380,140 400,95 400,90 320"
        href="#rect"
        alt="多边形"
      />
    </map>
  </body>
</html>

weixin_45846980

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5中map标签小案列

map标签name ：给 map 一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。name 属性不准与同文档中的其他 map 元素的值相同，如果 id 属性也被添加， name 属性和 id 属性的值必须相同。这里只列出 HTML5 支持的主要属性。alt：在未显示图像的浏览器上显示代替的文本字符串。在 HTML5 中, 这个属性只有在 href 属性被使用的时候才是必需的。shape：相关联的热点的形状。rect，它定义了一个矩形区域； circel，它定义了一个圆形区域
复制链接

扫一扫