files/zh-cn/web/html/element/map/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172

---
title: <map>
slug: Web/HTML/Element/map
translation_of: Web/HTML/Element/map
---
<div class="blockIndicator note">
<p>这篇文章翻译不完整</p>
</div>

<p><strong>HTML <code>&lt;map&gt;</code> 属性</strong> 与 {{HTMLElement("area")}} 属性一起使用来定义一个图像映射 (一个可点击的链接区域).</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">内容类别</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">流式内容</a>，<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">短语内容</a>，palpable 内容。</td>
  </tr>
  <tr>
   <th scope="row">允许的内容</th>
   <td>任何<a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">透明</a>元素。</td>
  </tr>
  <tr>
   <th scope="row">标签省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">允许的父元素</th>
   <td>任何接受<a href="/en-US/docs/HTML/Content_categories#Phrasing_content">短语内容</a>的元素。</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{domxref("HTMLMapElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>这个元素拥有<a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">全局属性</a>。</p>

<dl>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>name 属性 给 map 一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。name 属性不准与同文档中其他 map 元素的值相同，如果 id 属性也被添加，name 属性和 id 属性的值必须相同。</dd>
</dl>

<h2 id="示例">示例</h2>

<pre class="brush: html notranslate">&lt;map name="example-map-1"&gt;
  &lt;area shape="circle" coords="200,250,25" href="another.htm" /&gt;
  &lt;area shape="default" /&gt;
&lt;/map&gt;

</pre>

<h3 id="结果">结果</h3>

<p>{{ EmbedLiveSample('Examples', '350', '166', '', 'Web/HTML/Element/map') }}</p>

<h3 id="Expected_live_example_output">Expected live example output</h3>

<p>The live example above should appear similar to the following images (when using your keyboard tab key):</p>

<p><em>For the <code>left.html</code> link:</em><br>
 <img alt="" src="https://mdn.mozillademos.org/files/14595/Screen%20Shot%202017-02-02%20at%2010.48.40%20PM.png"></p>

<p><em>For the <code>right.html</code> link</em><br>
 <img alt="" src="https://mdn.mozillademos.org/files/14597/Screen%20Shot%202017-02-02%20at%2010.49.04%20PM.png"></p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-map-element', '&lt;map&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '&lt;map&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;map&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop(1.0)}}<sup>[1]</sup><br>
    {{CompatGeckoDesktop(5.0)}}<sup>[2]</sup><br>
    {{CompatGeckoDesktop(17.0)}}<sup>[3]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>1.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoMobile(1.0)}}<sup>[1]</sup><br>
    {{CompatGeckoMobile(5.0)}}<sup>[2]</sup><br>
    {{CompatGeckoMobile(17.0)}}<sup>[3]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>1.0</td>
   <td>1.0</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] 从 Gecko 5.0 {{geckoRelease("5.0")}} 起，空的映射不再略过，以支持兼容模式匹配时的非空映射。例如，考虑下面的 HTML： </p>

<pre class="brush: html notranslate">&lt;map&gt;&lt;/map&gt;
&lt;map&gt;
  &lt;area shape="rect" coords="25,25,75,75" href="#fail"&gt;
&lt;/map&gt;
&lt;img usemap="#a" src="image.png"&gt;
</pre>

<p>[2] Gecko 5.0 之前， {{HTMLElement("img")}} 元素会匹配第二个非空映射。现在它匹配第一个，即使它是空的。</p>

<p>[3] 从 Firefox 17 起， <code>&lt;map&gt;</code> HTML 元素的默认样式是 <code>display: inline;</code> 并且不再是 <code>display: block;</code>。这和其它浏览器行为一致，并且已经在兼容模式中这样做了。</p>

<h2 id="另见">另见</h2>

<ul>
 <li>{{HTMLElement("a")}}</li>
 <li>{{HTMLElement("area")}}</li>
</ul>

<p>{{HTMLRef}}</p>