HOME -> HTML_ARTIKLER -> 11-html-imagemap Lørdag, 21. Oktober 2017

HOME
FORUM
OPEN DIRECTORY
BOOKMARK
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

 

TopSyntaks.
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.

 

TopRektangel, 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.

 

TopCirkel (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

 

TopPolygon (shape="polygon")
Polygonen defineres i princip som et kvadrat, blot er der her flere koordinat par, se skitse.

 

TopEksempel 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.

NETeXplorer FORUM OPEN DIRECTORY
  I dette eksempel er der anvendt
<map name="navn">.
Dette virker fint i IE, FireFox og Opera browser.
OBS.: name er ikke valid XHTML
NETeXplorer FORUM OPEN DIRECTORY


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>


 

 

 

Copyright © 2002 - 2017
NETeXplorer.dk · All rights reserved Top