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

<img>

Man setter inn et bilde i et HTML-dokument ved å bruke <img>-taggen. Dette er en åpen tag og trenger ikke en avslutningstag.

Man må også bruke minst ett attributt: «src=» som forteller hvor på maskinen/serveren bildet befinner seg, eller banen til bildet fra dokumentet det skal settes inn i.

<img src="bilde.jpg">

Men man bør også ha med flere attributter i en <img>-tag:

Attributter til <img>:

• Alt
  (alternative text) - som er den den lille tekstboksen som popper opp når man holder musepekeren over et bilde. Eller som vises i bildefeltet hvis brukeren har skrudd av bildevisning i browseren sin. Må være med.
• Align
  (alignment) som bestemmer hvordan tekst skal flyte i forhold til bildet. Kan ha verdiene: bottom, middle, top, left, right, textop, absmiddle, baseline og absbottom.
  NB! Utgått til fordel for CSS
• Width
  er bredden på bildet målt i pixler. Må være med.
• Height
  er høyden på bildet målt i pixler. Må være med.

Det er viktig at både width og height attributtene er med. Dette fordi browseren da får et eksakt mål på bildet før det er lastet inn, og kan plassere alle elementene på siden der hvor det hører hjemme.
Og, ikke gjør om størrelsen på bildet med disse attributtene. Gjør du bildet mindre ved å bruke width og height, blir bildet tilsynelatende mindre, men ikke filstørrelsen. Bildet «veier» akkurat like mye, og da er mye av vitsen ved å gjøre bildet mindre, borte. Bruk et billedbehandlingsprogram som CorelDraw, Photoshop eller Fireworks for å krympe bildene, både størrelsesmessig og filmessig.

• Border
  En kantlinje rundt bilde målt i pixler. Er bildet brukt som en link vil det automatisk legges til en kantlinje rundt bildet. Bruk da border=0 for å få bort denne.
  NB! Utgått til fordel for CSS.
• Hspace
  Horisontal avstand (luft) fra begge sider målt i pixler. En verdi på 5 vil «sette inn» 5 pixler med ingenting på begge sider av bildet.
  NB! Utgått til fordel for CSS.
• Vspace
  Vertikal avstand (luft) fra topp og bunn målt i pixler. En verdi på 5 vil «sette inn» 5 pixler med ingenting både over og under bildet.
  NB! Utgått til fordel for CSS.

Kode-eksempel:

<img src="images/mitt_bilde.jpg" alt="her er et bilde av meg" width="400" height="600">

<bilde som link>

Skal et bilde brukes som link, må bildet ligge mellom <a>-taggene.

<a href="http://www.jensm.com"><img src="images/photographer.gif" width="200" height="132" alt="Link til min side"></a>

Gå til neste side for å lære om imagemaps, eller klikkbare områder i et bilde.