Ved at bruge denne side acceptere du brugen af cookies.

Læs mere

Del via:

Billeder og Billede-links i HTML

Der er flere måder at indsætte billeder på i HTML, her kan du læse om nogle af dem.

Redigeret: 2017-07-11 12:44

Når man indsætter billeder i HTML anvendes img elementet. Ofte vil man også angive en alternativ tekst sammen med billedet, hvor den alternative tekst kan inkluderes med alt attributten.

En alt-tekst vil kun blive brugt, når et billede af en eller anden grund ikke kan indlæses, og hvis den besøgende benytter sig af en skærmoplæser – hvilket eksempelvis kan være tilfældet for svagtseende. Det anbefales altid at inkludere en alt-tekst, uanset om du forventer besøgende med skærmoplæsere eller ej.

Det er src attributten som angiver adressen til billedet som skal indlæses. Det anbefales man bruger kendte, understøttede formater. De mest almindelige formater er jpg og png.

Man kan indsætte et billede ved at benytte koden nedenfor:

<img src="/billeder/MitBillede.jpg" alt="Et billede af mig selv...">

Billeder som links

Der er flere måder at bruge billeder som links. En af de nemmeste måder at gøre det på, er ved at indsætte img elementet i et link element. Når man indsætter almindelige links bruges a elementet, så hvis man vil indsætte et billede inden i et a element, kan man gøre som vist i koden nedenfor:

<a href="https://beamtic.dk/"><img src="/i/html-living-standard-logo-orange1.png" alt="Beamtic.dk"></a>

Man kan også angive billedet som en baggrund direkte på a elementet, det kræver dog at man bruger CSS til at skifte nogle egenskaber for elementet først. Normalt er a elementet et inline element, hvilket bivirker at man ikke umiddelbart kan skifte højden og bredden på elementet, og det vil også opføre sig uhensigtsmæssigt. Derfor skal vi først ændre elementet til et block element – det kan vi gøre via display egenskaben i CSS som vist nedenfor:

#supportA {
  display:block;
  width:200px;
  height:250px;
  background: url("/i/webudvikling/html-living-standard-logo-orange1.png");
}

Når vi så efterfølgende indsætter vores link, skal vi bare give det et unikt ID. Alternativt, hvis man har flere links, som bruger samme billede, kan man bruge en klasse i stedet for et ID. Læs mere om klasser og ID'er her

Hvis vi eksempelvis har et support link på vores hjemmeside, og vi ønsker, at benytte et billede som link, så kan vi nu bruge, den noget kortere, kode som vist nedenfor:

<a href="https://beamtic.dk/" id="supportA"></a>

Før at ovenstående vil virke, er det dog vigtigt, at du har linket til et eksternt StyleSheet. Hvordan du gør det, bliver omtalt i en anden vejledning.

De mest almindelige problemer

Det nok mest almindelige problem er, at et billede man bruger ikke vises ordenligt. Når det sker, er det næsten altid fordi, at adressen til billedet er forkert. Læs: Absolutte og Relative Stier

Hvis et baggrundsbillede ikke vises, kan det skyldes, at man har brugt et tomt inline element som "kollapser". Husk derfor altid display:block; på inline elementer.