Søk i Webskolen:

Globale linker

• Linker
• Oppgaver

HTML

• Intro
• Basis
• Body
• Tekst
• Lister
• Tekstlinker
• Tekstjustering
• Bilder intro
• Bilder
• Imagemap
• Tabeller
• Frames Intro
• Frameset
• Frame
• Target
• Iframe
• Forms
• SSI
• Meta-tagger
• Cond.comment
• Tag-guide
• Søkemotor-optimalisering

<imagemaps>

Imagemaps er områder i bilder som er blitt delt inn i klikkbare områder ved hjelp av rektangler, sirkler eller polygoner. Klikker brukeren på et definert område i bildet, vil han/hun bli tatt til den nye url'en. Imagemaps er en «grafisk» måte å lage linker på. De klikkbare områdene i et bilde omtales gjerne som «hotspots».

Rundt nonnen er det trukket en rekangulær hotspot, rundt hodet til mannen er det trukket en sirulær hotspot og rundt lyktestolpen er det trukket et polygon. Klikk på områdene for å se omrisset av hotspotten.

Dette har resultert i følgende kode:

<img src="images/waiting_for_bus.jpg" width="300" height="250"
usemap="#BusMap" border="0">
<map name="BusMap">

<area shape="rect" coords="47,125,99,233"
href="http://www.sol.no/" alt="Til SOL" title="Til SOL"
target="_blank">
<area shape="circle" coords="121,147,20"
href="http://www.vg.no/" alt="Til VG" title="Til VG"
target="_blank">
<area shape="poly"
coords="217,219,221,105,203,33,227,11,247,39,233,99,237,217"
href="http://www.dagbladet.no/" alt="Til Dagbladet"
title="Til Dagbladet" target="_blank">

</map>

Coords regnes i pixler fra øverste venstre kant i et bilde. Se i eksempelet over for koordinater.

Attributtet shape kan ha verdiene:

• Rect
  (rektangulære) coords refererer da til øverste venstre kant og nederste høyre kant i hotspot'ens koordinater.
• Circ
  (sirkel) coords refererer da til midtpunktet i sirkelens koordinater og sirkelens omkrets.
• Poly
  (polygoner) coords refererer da til de enkelte punktenes koordinater.

Det er vanskelig å skulle definere et imagemap ved hjelp av håndkoding. Men det finnes programmer som kan hjelpe deg med dette: gå f.eks. inn på http://www.tucows.com og søk på imagemap i søkefeltet, eller bruk Dreamweaver eller Photoshop.

Det var alt om bilder, og neste side handler om tabeller