Billeder på hjemmesider

Den tag man bruger til billeder hedder <IMG> (dvs. image). Den er lidt speciel i forhold til de andre tags, idet man ikke har en slut-tag. Til tag'en hører attributten SCR, som er her man fortæller hvad det er for et billede der skal indsættes på pladsen.

Hvis vi har billedet 'Laugh.gif' i det directory der hedder 'Graphics', ser koden således ud:


På siden ser resultatet således ud:

En ting er at få et billede sat ind, men det skal selvsagt også sidde i den rigtige side. Her kan det blive lidt tricky, for der er en del muligheder.

Hvis vi starter med de meste simple placeringer: højre, venstre og midt:

Før HTML 5 havde man attributten ALIGN. Den fungerer stadig i nogen grad under HTML 5, men den bliver efter sigende afviklet. I dag har vi i stedet STYLEN float. Der er flg. muligheder:

Værdi	Effekt
left	Elementet flyder til venstre. Hvis der er tekst, vil den løbe til højre for billedet.
right	Elementet flyder til højre. Hvis der er tekst, vil den løbe til venstre for billedet.
none	Elementet flyder ikke, men bliver hvor det er placeret i teksten (f.eks. små smileys midt i teksten)
inherit	Specificerer at elementet får samme værdi som forældreelementet, dvs. er teksten venstrestillet bliver billedet det også, osv.

Skal vi have billedet til at være i venstre side bliver det således:


Som ser således ud:



At få et billede centreret er lidt mere omstændigt, eftersom der ikke er en style der hedder float:center. Man benytter sig af en kombination af tre styles: float, block og margin. Float skal være 'none', så billedet bliver vist der hvor det står i koden. Display skal være 'block', dvs. det er en kasse hvor der ikke er noget på hverken højre eller venstre side. Margin skal være '0 auto', hvilket er top og bund er margin 0 og højre og venstre skal browseren selv beregne. Ved at selv at skulle beregne højre og venstre margin centrerer browseren billedet.

Koden kommer nu til at se således ud:


På siden ser resultatet således ud:




En anden, og noget mere udbredt, metode er at anbringe billedet i en DIV med centreret tekst. Koden til dette vil se således ud:


På siden ser resultatet således ud:



Ved denne fremgangsmåde skal man lige være opmærksom på, at hvis man i sit style sheet har defineret at for IMG er default setting float:left eller float:right, vil disse overtrumfe DIV'en. I så fald skal IMG'en lige udstyres med en float:none eller float:inherit, så den følger centreringen fra DIV'en. Så ser koderne således ud:

Billedstørrelsen kan skaleres efter behov. Det er sædvanligvis en dårlig idé at skalere billeder op, fordi de bliver grynede og pixelerer. Derimod er det ofte en god idé at skalere ned, fordi det kan give et skarpere billede på skærmen.

Størrelse styres med STYLE, og man kan styre på både height og width. Begge styles skaleres som størrelse i pixels.

Hvis vi tager billedet 'Laugh.gif' fra før og vil skalere det til 30 pixels i højden, ser koden således ud:


På siden ser resultatet således ud:



Hvis man kun bruger den ene af de to styles, skalerer browseren selv den dimension man ikke specificerede, så billedet ikke bliver forkert proportioneret.

Der er ikke noget i vejen for at bruge begge styles samtidig. Det kan man få meget sjov ud af med at skævvride billederne. Hvis vi arbejder videre på det skalerede billede og nu også sætter bredden til 100 pixels, ser koden således ud:


På siden ser resultatet således ud:

Til IMG-tag'en hører der en relativt vigtig attribut, som hedder ALT. ALT er den attribut der fortæller søgemaskinerne hvad det er for et billede der er på siden, når den indekserer sitet.

Folk er generelt dårlige til at navngive filer, så de får et eller andet nummer eller en bogstavkode, og søgemaskinerne har ingen chance for vide hvad forskellen er på billederne 1.jpg og 2.jpg. Det er så her man i sin ALT-attribut skriver at 1.jpg er "Tante Oda står på hovedet." og 2.jpg er "Onkel Oskar taber gebisset."

Internet Explorer bruger også denne attribut til at lave en tekstbox når man holder musen over. De andre browsere bruger attributten TITLE til at lave denne tekstbox. I praksis betyder dette, at ALT og TITLE ofte er ens. Hvis begge attributter er specificeret, vil Internet Explorer vise indholdet af TITLE-attributten i stedet for ALT.

Hvis vi tager billedet 'Laugh.gif' fra før og vil have det indekseret som en "Leende smiley", og også have det på som billedtekst når musen er over billedet, kommer teksten til at se således ud:


På siden ser resultatet således ud (hold musen over billedet):