Referens
HTML map

HTML map

HTML map taggen anger en bildkarta med aktiva områden.

Exempel:

clown

Klicka på min näsa!

HTML:

<img src="clown.jpg" alt="clown" usemap="#Map" />
<map name="Map" id="Map">
   <area shape="circle" coords="67,130,26"
   href="clowncolor.jpg">
</map>

Elementet map anger en bildkarta som anger klickbara områden inuti en bild. De klickbara områdena definieras med ett antal area-element som anger de klickbara områdenas placering.

Attributet "name" måste finnas och måste ha samma värde som img-elementets attribut "usemap" fast utan #.

Läs mer om HTML bilder

HTML map
Elementtyp Sluttagg Utfasat Doctype
Blockelement / Inlineelement Ja Nej Strict, Transitional, Frameset
Elementet får innehålla
Blockelement, area
Elementet får finnas i
Blockelement, inlineelement
Skillnad mellan HTML och XHTML
Ingen

Tips för HTML map

Elementet map kan användas till att lägga in länkar inuti bilder men elementet kan även användas till att köra Javascript.

Exempel:

clown

Klicka på min näsa!

HTML:

<img src="clown.jpg" alt="clown" usemap="#Map" >
<map name="Map" id="Map">
   <area shape="circle" coords="67,130,26"
   onClick="alert('AJ!')">
</map>

HTML map attribut

Nödvändiga attribut
Attribut Beskrivning Värde
name Anger bildkartans namn text

Universella attribut
Attribut Beskrivning Värde
id Anger att elements unika identitet text
class Anger vilken klass eller vilka klasser ett element tillhör text
style Tilldelar elementet en egen visuell stil CSS attribut och värden
title Anger en titel för eller kort beskrivning av elementet text
dir Anger textriktning för innehållet rtl, ltr
lang Anger språk på elementets innehåll språkkod
xml:lang Används istället för "lang" när koden skrivs i XHTML 1.0 språkkod

Händelse attribut
Attribut Utlösande händelse Värde
onclick Enkelklick med musen på elementet javascript
ondblclick Dubbelklick med musen på elementet javascript
onkeydown En tangent trycks ned javascript
onkeyup En tangent släpps upp javascript
onkeypress En tangent trycks ned eller hålls nedtryckt javascript
onmousedown En musknapp trycks ned över elementet javascript
onmouseup En musknapp släpps upp över elementet javascript
onmouseover Muspekaren flyttas in över elementet javascript
onmousemove Muspekaren flyttas inom elementet javascript
onmouseout Muspekaren flyttas ut från elementet javascript
| Mer