files/ca/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

---
title: <map>
slug: Web/HTML/Element/map
tags:
  - Element
  - HTML
  - HTML embedded content
  - Multimedia
  - NeedsLiveSample
  - Reference
  - Web
translation_of: Web/HTML/Element/map
---
<p>L'<strong>element HTML <code>&lt;map&gt;</code></strong> s'utilitza amb elements {{HTMLElement("area")}}  per definir un mapa d'imatge (un àrea d'enllaç que es pot clicar).</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Contingut dinàmic</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, contingut palpable.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td>Qualsevol element <a href="/en-US/docs/HTML/Content_categories#Transparent_content_model">transparent</a>.</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti <a href="/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
  </tr>
  <tr>
   <th scope="row">
    <p>Interfície DOM</p>
   </th>
   <td>{{domxref("HTMLMapElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">atributs globals</a>.</p>

<dl>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>L'atribut name li dóna al mapa un nom perquè pugui ser referenciat. L'atribut ha d'estar present i ha de tenir un valor no buit sense caràcters d'espai. El valor de l'atribut name no ha de ser una coincidència de cas de compatibilitat menor per al valor de l'atribut name d'un altre element mapa en el mateix document. Si s'especifica l'atribut id, tots dos atributs han de tenir el mateix valor.</dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<pre class="brush: html">&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>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</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>Definició inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</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>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</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] A partir de Gecko 5.0 {{geckoRelease ("5.0")}}, els mapes buits ja no són saltats en favor dels no buits quan coincideixen i estan en la modalitat d'interpretació. Per exemple, considereu el següent HTML:</p>

<pre class="brush: html">&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] Abans de Gecko 5.0, l'element {{HTMLElement ("img")}} hauria coincidit amb el segon mapa no buit. Ara coincideix amb el primer, encara que estigui buit.</p>

<p>[3] A partir del Firefox 17 l'estil per defecte de l'element HTML <code>&lt;map&gt;</code> és <code>display:inline</code>; i no <code>display:block</code>;. Això coincideix amb el comportament d'altres navegadors i el cas que es donava en la modalitat d'interpretació.</p>

<h2 id="Veure">Veure</h2>

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

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