欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML5中map标签小案列

程序员文章站 2022-05-11 10:14:47
...

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>

相关标签: html html5