- <map>标签 与 <area> 标签一起使用来定义一个图像映射 (一个可点击的链接区域)
|
属性 |
说明 |
|
name |
name 属性 给 map 一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。name 属性不准与同文档中其他 map 元素的值相同，如果 id 属性也被添加，name 属性和 id 属性的值必须相同。 |
- <area> 标签 在图片上定义一个热点区域，可以关联一个超链接。<area>元素仅在<map>元素内部使用。
|
属性 |
说明 |
||||||||||
|
alt |
在未显示图像的浏览器上显示代替的文本字符串。这个文本应该能传达给用户与显示图像而没有文本的情况下同等的选择（译者注：就是字和图片表达一个意思）。在 HTML4 中， 这个属性时必需的，但是可以是一个空的串 ("")。在 HTML5 中，这个属性只有在href 属性被使用的时候才是必需的。 |
||||||||||
|
href |
area 的超链接，值为一个 URL. HTML4 里，这个值不管是不是有值都要明确指定出来. HTML5 里则不需要。 |
||||||||||
|
coords |
给热点区域设定具体的坐标值。这个值的数值和意义取决于这个值所描述的形状属性.。对于矩形或长方形，这个coords 值为两个 X,Y 对：左上、右下。 对于圆形，这个值是 x,y,r ，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值.。对于多边和多边形，这个值是用 x,y 对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3,等等。HTML4 里， 值可能是像素数量或者百分比，区别是不是有%出现; HTML5 里，只可能是像素的数量。 |
||||||||||
|
download |
这个属性如果存在的话，表明作者想把超链接用于下载一个资源。请查看<a> 获得关于 download属性的完整描述 |
||||||||||
|
hreflang |
指明链接资源的语言类型，值的范围参考BCP47. 这个属性只能在指明 href 属性之后使用 |
||||||||||
|
media |
指明链接资源的媒体类型，例：print and screen。如果此属性省略，默认全部。仅在 href 属性存在情况下使用 |
||||||||||
|
rel |
对于包含 href 属性的锚，该属性指定目标对象与链接对象的关系。该值是一个逗号分隔的链接类型值列表。这些值及其语义将由一些可能对文档作者有意义的权威进行注册。如果没有其他的关系，默认的关系是无效的。只有当 href 属性是 presen 时才使用该属性 |
||||||||||
|
shape |
相关联的热点的形状。HTML 5 和 HTML 4 的规范定义了值 rect，它定义了一个矩形区域;圆圈，它定义了一个圆形区域;多边形，它定义了一个多边形;默认情况下，这表示整个区域超出了任何定义的形状。许多浏览器，特别是 Internet Explorer 4 和更高版本，支持弧形、多边形和矩形作为形状的有效值 |
||||||||||
|
target |
本属性指明了在什么地方显示链接的资源. HTML4 里，这个值是一个 frame 的链接或者关键字. HTML5 里，它是一个浏览器上下文 (比如：标签，窗口或者内嵌的 frame) 的链接或者关键字。值的含义：
|
||||||||||
|
type |
该属性指定了用于链接目标的 MIME 类型的媒体类型。一般来说，这是严格的咨询信息;然而，在未来，浏览器可能会为多媒体类型添加一个小图标 |
示例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
<body> <map name="example-map-1"> <area shape="circle" coords="200,250,25" href="another.htm" /> <area shape="default" /> </map> </body>
</html> |
来自 <https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/map>