--- title: slug: Web/HTML/Element/map translation_of: Web/HTML/Element/map --- 这篇文章翻译不完整 HTML <map> 属性 与 {{HTMLElement("area")}} 属性一起使用来定义一个图像映射(一个可点击的链接区域). 内容类别 流式内容,短语内容,palpable 内容。 允许的内容 任何透明元素。 标签省略 {{no_tag_omission}} 允许的父元素 任何接受短语内容的元素。 DOM 接口 {{domxref("HTMLMapElement")}} 属性 这个元素拥有全局属性。 {{htmlattrdef("name")}} name属性 给map一个名字用来查询,这个属性是必须的,值必须不能为空并且不能带空格。name属性不准与同文档中其他map元素的值相同,如果id属性也被添加,name属性和id属性的值必须相同。 示例 <map name="example-map-1"> <area shape="circle" coords="200,250,25" href="another.htm" /> <area shape="default" /> </map> 结果 {{ EmbedLiveSample('Examples', '350', '166', '', 'Web/HTML/Element/map') }} Expected live example output The live example above should appear similar to the following images (when using your keyboard tab key): For the left.html link: For the right.html link 规范 Specification Status Comment {{SpecName('HTML WHATWG', 'the-map-element.html#the-map-element', '<map>')}} {{Spec2('HTML WHATWG')}} {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '<map>')}} {{Spec2('HTML5 W3C')}} {{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<map>')}} {{Spec2('HTML4.01')}} Initial definition 浏览器兼容性 {{CompatibilityTable}} Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari Basic support 1.0 {{CompatGeckoDesktop(1.0)}}[1] {{CompatGeckoDesktop(5.0)}}[2] {{CompatGeckoDesktop(17.0)}}[3] {{CompatVersionUnknown}} 1.0 1.0 Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Basic support 1.0 {{CompatGeckoMobile(1.0)}}[1] {{CompatGeckoMobile(5.0)}}[2] {{CompatGeckoMobile(17.0)}}[3] {{CompatVersionUnknown}} 1.0 1.0 [1] 从 Gecko 5.0 {{geckoRelease("5.0")}} 起,空的映射不再略过,以支持兼容模式匹配时的非空映射。例如,考虑下面的 HTML: <map></map> <map> <area shape="rect" coords="25,25,75,75" href="#fail"> </map> <img usemap="#a" src="image.png"> [2] Gecko 5.0 之前, {{HTMLElement("img")}} 元素会匹配第二个非空映射。现在它匹配第一个,即使它是空的。 [3] 从 Firefox 17 起, <map> HTML 元素的默认样式是 display: inline; 并且不再是 display: block;。这和其它浏览器行为一致,并且已经在兼容模式中这样做了。 另见 {{HTMLElement("a")}} {{HTMLElement("area")}} {{HTMLRef}}
这篇文章翻译不完整
HTML <map> 属性 与 {{HTMLElement("area")}} 属性一起使用来定义一个图像映射(一个可点击的链接区域).
<map>
这个元素拥有全局属性。
<map name="example-map-1"> <area shape="circle" coords="200,250,25" href="another.htm" /> <area shape="default" /> </map>
{{ EmbedLiveSample('Examples', '350', '166', '', 'Web/HTML/Element/map') }}
The live example above should appear similar to the following images (when using your keyboard tab key):
For the left.html link:
left.html
For the right.html link
right.html
{{CompatibilityTable}}
[1] 从 Gecko 5.0 {{geckoRelease("5.0")}} 起,空的映射不再略过,以支持兼容模式匹配时的非空映射。例如,考虑下面的 HTML:
<map></map> <map> <area shape="rect" coords="25,25,75,75" href="#fail"> </map> <img usemap="#a" src="image.png">
[2] Gecko 5.0 之前, {{HTMLElement("img")}} 元素会匹配第二个非空映射。现在它匹配第一个,即使它是空的。
[3] 从 Firefox 17 起, <map> HTML 元素的默认样式是 display: inline; 并且不再是 display: block;。这和其它浏览器行为一致,并且已经在兼容模式中这样做了。
display: inline;
display: block;
{{HTMLRef}}