|
 |
|
Offentliggjort maj 2006 - Opdateret n/a
Imagemaps
Imagemaps er billeder eller grafik hvorpå der er lagt en mappe med tilhørende koordinater (Map). På mappen er der defineret arealer som er klikbare (area).
Indhold
 Syntaks.
Syntaks for imagemap
<map id="navn">
<area shape="...." coords="...." href="...."></area>
</map>
<img .... usemap="#navn" />
Map-elementet
Elementet map indkapsler dine data. Selve map elementet giver ingen udskrift til skærmen.
For at kunne anvende map tilføjes denne et unikt navn. Dette gøres ved at tilføje en ekstra attribut, nemlig name eller id attributtet.
<map id="navn">
eller
<map name="navn">
Imellem <map> og </map> tagene defineres selve arealet som er klikbart. Dette gøres ved hjælp af <area ....> elementet samt tilhørende attributter.
shape angiver formen på det klikbare område. Her kan der anvendes rect, circle eller polygon.
coords angiver koordinaterne for det klikbare område. Disse angives i pixels, og er absolutte værdier indenfor grafikken / billedet adskilt med komma.
Billedet eller grafikken kaldes via <img src=...>. Image tagen tilføjes usemap="#navn" der danner reference punkt til map elementet.
Rektangel, kvadrat (shape="rect")
For at kunne definere et kvadrat eller en rektangel har vi brug for to koordinat par (X1,Y1) og (X2,Y2). Udgangspunktet er øverste venstre hjørne (0,0) af emnet.
X1 = Afstanden fra venstre til emnets øverste venstre hjørne i pixels.
Y1 = Afstanden fra top til emnets øverste venstre hjørne i pixels.
X2 = Afstanden fra venstre til emnets nederste højre hjørne i pixels.
Y2 = Afstanden fra top til emnets nederste højre hjørne i pixels.
Cirkel (shape="circle")
I forbindelse med cirklen har vi brug for tre koordinater X1, Y1 og R.
X1 = Afstand fra venstre til centrum af cirkelen i pixels.
Y1 = Afstand fra top til centrum af cirkelen i pixels.
R = Radius
Polygon (shape="polygon")
Polygonen defineres i princip som et kvadrat, blot er der her flere koordinat par, se skitse.
Eksempel på anvendelse
Elsempel
I dette eksempel er der anvendt
<map id="navn">.
Dette virker fint i IE og Opera, men kan volde problemer i FireFox browser.
|
|
I dette eksempel er der anvendt
<map name="navn">.
Dette virker fint i IE, FireFox og Opera browser.
OBS.: name er ikke valid XHTML
|
Forklaring på koordinaterne
Kilde koden til eksemplet er ....
<img style="width: 40px; height: 120px;" src="menu.gif" alt="" usemap="#MenuMap" />
<map id="MenuMap">
<area shape="rect" coords="5,5,35,35" href="http://www.NETeXplorer.dk" alt="NETeXplorer"></area>
<area shape="rect" coords="5,45,35,75" href="http://www.forum.NETeXplorer.dk" alt="FORUM"></area>
<area shape="rect" coords="5,85,35,115" href="http://www.directory.NETeXplorer.dk" alt="OPEN DIRECTORY"></area>
</map>
|
