HTML5中map标签小案列
程序员文章站
2022-05-11 10:14:47
...
map标签
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>
上一篇: 浅述PHP设计模式(6)
下一篇: PHP数组快速筛选函数的实现