W3C HTML5标准阅读笔记 - map、area

标准原文:https://www.w3.org/TR/html5/embedded-content-0.html#the-map-element

HTML5中,area元素用于定义“区域”;而map元素则用于和img、area元素一起,定义图像地图(image map)。

map

map元素用于定义图像地图,其内容模型(Content Model)为透明(transparent)。除了通用属性,map元素还拥有一个必须定义的name属性,且其值不能包含空字符串。当其它元素需要使用图像地图时,可将自己的usemap属性设置为此map元素的name值,从而对map对象进行引用。

在同一个文档中,多个map元素的name值不能发生冲突(大小写不敏感) -- 很简单,一旦两个map元素的name相同,当其它元素用usemap引用该name时,浏览器将无法决定最终所使用的图像地图。对于某个特定的map标签,如果拥有id属性,则该id属性值必须与name属性值相同。

在DOM中,map对象存在2个比较有趣的字段:

  1. map.areas。表示map内的所有area元素。
  2. map.images。表示所有使用map的img元素和object元素。

area

area元素用于定义“区域”,一般作为map元素的子元素而使用。标准规定,area元素无闭合标签,且不能包含任何子元素或内部文本。

除了通用属性,area元素还拥有以下特有属性,其中shape和coords属性是关键:

  • shape。定义区域的具体形状。
  • coords。定义区域形状的坐标点。
  • href。设定链接资源的地址,与a标签相同。
  • hreflang。设定链接资源的自然语言,与a标签相同。
  • alt。设定图片不可用时的替代显示文字。当存在href属性时,必须设定alt属性。
  • download。设定访问链接资源时是否下载资源文件,与a标签相同。
  • rel。设定当前文档与目标资源之间的关系,与a标签相同。
  • target。设定浏览资源的环境,与a标签相同。
  • type。设定链接资源的MIME Type,与a标签相同。

对于shape属性,有以下几种可选项:

  • rect/rectangle。矩形,其中rectangle是不规范的写法。当shape属性缺失时,取此矩形值。
  • default。默认,当shape值为default时,所定义的area区域包含整张图片。
  • circle/circ。圆形,其中circ是不规范的写法。
  • poly/polygon。多边形,其中polygon是不规范的写法。

对于coords属性,其值为以逗号隔开的整数数列,具体情况为:

  • 当shape为圆形时,coords由3个整数组成:前两个整数表示圆心的坐标(以图片左上角顶点为原点),第三个整数表示半径。
  • 当shape为default时,area元素的coords属性不应存在,此时选定区域为整张图片。
  • 当shape为多边形时,coords至少需包含6个整数,且整数的数目必须为偶数。其中,每一对偶数代表一个多边形顶点的坐标。
  • 当shape为矩形时,coords由4个整数组成,两对整数分别表示矩形左上角顶点和右下角顶点的坐标。