Se kilde til Map-Tag

==Hvad er Map-Tag?==
<map> tag bruges til at lave en, klient-side, klikbar "minikort". Det vil sige at man kan lave et kort, hvor det er muligt at lave områder der kan klikkes på. Når man klikker på de områder, kommer man hen til det billede der er anvist til.

==Hvordan bruger man <map> tag?==
Når man skal skrive en <map> tag, starter man med at lave en <img, hvor man henviser til det billede man vil bruge. Og i samme linje, angiver man bredden og højden på det billede man bruger samt navnet på det billede man bruger. Til sidst laver man en "usemap=" linje hvor man skriver hvad man vil kalde billedet til reference senere i kodningen.

Det kunne f.x. se således ud<ref>[http://www.w3schools.com/tags/tag_map.asp www.w3schools.com map tag]</ref>:

 <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

Længere nede laver man en linje der hedder <map name=, hvor man bruger det samme navn som man brugte under <usemap=. Under den linje, fortsætter vi med at fortælle hvordan de klikbare områder skal se ud, hvilken form de har, hvor de er, og hvor store de er. Samt man forbinder den enkelte til den fil, eller siden man gerne vil have til at dukke op når man klikker indenfor det område. Man kan have så mange område på et billede, som man ønsker.

<pre>
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
</pre>

Koden vil i kombination med en billedfil "planets.gif" give følgende udseende:

[[image:map_tag.png]]

I dette eksempel har solen og de to viste planeter fået tildelt en link-funktion, mens resten af billedet ikke linker til noget, og hver af delene linker til sin egen underside.

==Hvilke browser er understøttet?==
Stort set alle browsere er understøttet. [[Internet Explorer]], [[Chrome|Google Chrome]], [[FireFox|Mozilla Firefox]], [[Opera]] og [[Safari|Apple Safari]].

==Anvendelse af grafik som menu==
Man kan ønske at have et stort billede til at angive sin menu, hvor man så kan klikke på forskellige dele af billedet som de forskellige menupunkter - dette kan også laves simpelt med et map-tag.

Det der kan være svært er at få det til at hænge sammen med grafikken i resten af siden, men her er et eksempel på hvordan det kunne gøres:

Siden består af 4 dele:
*Øverst en Header bare for at få lidt luft i siden. Den kan være grafisk eller bare tom.
*Nederst (eller som man tit vil have det - lige under headeren) er der placeret en menu, der er ét grafisk billede.
*Så er der en indholds-del der udelukkende består af grafisk baggrund, hvor der inden i denne er
*En tekst-del (eller hvad man ønsker der skal være i den), som kan have en hvid baggrund

Menuen og indholds-delens grafiske baggrund skal passe sammen, så de to billeder ser ud til at være et sammenhængende billede (det laves lettest i [[Photoshop]] ved at lave et billede, og slice det op i to).

En CSS til dette kunne se således ud:
<source lang="css">
body
{ 
}

#head {
margin:auto;
width:900px;
height:30px;
}

#menu {
margin:auto;
width:800px;
height:110px;
}

#content {
margin:auto;
padding-top:40px;
width:800px;
height:560px;
background-image:url('body.gif');
}

#tekst {
margin:auto;
padding:20px;
background-color:#FFF;
width:680px;
height:500px;
}
</source>

===Eksempel ud fra det beskrevne===
Den viste CSS-kode dækker over et eksempel der kan [[media:map-click.zip|hentes i denne ZIP-fil]] kommer til at se ud som følger:

[[Fil:map-click.png|400px]]

Her er den blå baggrund lavet af to billeder, hvor det nederste billede er det med smilyer i, der fungerer som menu-punkter. Den hvide tekst-del er den tekst-boks der ligger inde i indholds-baggrunden.

==Referencer==
<references />


{{Webdesign}}
[[Kategori:HTML_Links]]
[[Kategori:HTML_Billede]]