Handleiding HTML - Beschrijving IMG element

IMG	Inhoud Handleiding HTML Overzicht elementen

Van het IMG element worden de volgende attributen beschreven: SRC, ALT, LONGDESC, HEIGHT, WIDTH, ALIGN, BORDER, HSPACE, VSPACE, USEMAP, ISMAP, LOWSRC en NAME.

De beschrijving van de attributen STYLE, CLASS, ID, TITLE, LANG en DIR is opgenomen in het onderdeel Algemene attributen.

Een overzicht van attributen, die betrekking hebben op het uitvoeren van een script bij het optreden van een bepaalde gebeurtenis, wordt gegeven in het onderdeel Gebeurtenis-attributen.

Het gebruik van het IMG element wordt toegelicht in het onderdeel Afbeeldingen en image maps in de Handleiding HTML.

IMG

HTML	2.0
NN	1.0
MSIE	1.0
OP	2.1

Met het IMG element definieer je een dat een afbeelding in het document opgenomen moet worden.
De opbouw is:

<IMG ..>

Het IMG element heeft alleen attributen en geen inhoud. Een beëndiging is daarom niet toegestaan.
Aan het IMG element moeten minimaal de attributen SRC en ALT worden toegevoegd. Daarnaast is het verstandig ook altijd de attributen WIDTH en HEIGHT te gebruiken.

SRC

HTML	2.0
NN	1.0
MSIE	1.0
OP	2.1

Met het SRC attribuut wordt bepaald welke afbeelding opgenomen moet worden. Algemeen ondersteunde formaten van afbeeldingen zijn GIF en JPG. Een nieuw formaat, dat nog slechts beperkt wordt ondersteund, is PNG (Portable Network Graphic).
De opbouw is:

<IMG SRC="URI" ..>

De URI (Uniform Resource Identifier) heeft de volgende opbouw:

http://host/path

Host specificeert het adres van de server, waarop zich de gevraagde afbeelding bevindt. Het kan een IP-adres zijn, maar meestal is het de naam van de machine. Een machinenaam (ook wel domeinnaam) bestaat uit meerdere delen gescheiden door een punt, begint vaak met "www" en eindigt met een landcode (bijvoorbeeld "nl", "be", "uk") of de vooral in de Verenigde Staten gebruikte code voor de sector (bijvoorbeeld "com" voor commerciële instellingen en "org" voor non-profit organisaties).
Path geeft aan hoe de gevraagde afbeelding op de server gevonden kan worden: in welke directory en onder welke bestandsnaam.

Het is niet altijd nodig een complete URI op te nemen. Als de gevraagde afbeelding zich op de lokale server bevindt, dan volstaat de volgende URI:

path

ALT

HTML	2.0
NN	1.0
MSIE	1.0
OP	2.1

Het ALT attribuut zorgt er voor dat in plaats van de afbeelding een tekst geplaatst wordt indien de browser geen afbeeldingen kan weergeven (bij gebruik van een tekst-georiënteerde browser), of wanneer het automatisch laden van afbeeldingen in een grafische browser is uitgezet. Daarnaast geven de nieuwere versie van de belangrijkste browsers de inhoud van het ALT attribuut als een soort tooltip weer, wanneer de cursor zich boven de afbeelding bevindt.
De opbouw is:

<IMG
ALT="omschrijving afbeelding" ..>

Geadviseerd wordt het ALT attribuut altijd te gebruiken.

LONGDESC

HTML	4.0
NN	-
MSIE	-
OP	-

Het LONGDESC attribuut specificeert een verwijzing naar een document, dat in aanvulling op de korte omschrijving door middel van het ALT attribuut, een lange beschrijving van de afbeelding bevat. Deze beschrijving is vooral nuttig voor bezoekers, die gebruik moeten maken van een niet-visuele browser (spraak-synthesizer, braille-apparaat).
De opbouw is:

<IMG LONGDESC="URI" ..>

Voor een toelichting op de URI zie het SRC attribuut.

WIDTH

HTML	3.2
NN	1.1
MSIE	1.0
OP	2.1

Met het WIDTH attribuut wordt de breedte van de afbeelding vastgelegd.
De opbouw is:

<IMG WIDTH="waarde" ..>

De waarde kan uitgedrukt worden in pixels, of als percentage van de beschikbare breedte. Het gebruik van een percentage wordt slechts zeer beperkt ondersteund en leidt bij sommige browsers tot problemen bij de weergave. Aangeraden wordt daarom alleen een waarde in pixels op te nemen.
Het opgeven van de afmetingen van een afbeelding spaart tijd, omdat de browser het voor de afbeelding benodigde gebied vooraf kan berekenen en met het plaatsen van de rest van de inhoud van het document niet hoeft te wachten tot de afbeelding geheel geladen is. De afmetingen kunnen gevonden worden met behulp van een grafische editor, zoals Paint Shop Pro. Daarnaast hebben veel HTML-editors een wizard voor het opnemen van afbeeldingen, die automatisch de afmetingen vastlegt.
Het WIDTH attribuut kan ook gebruikt worden om de afbeelding in een andere dan de eigen breedte weer te geven. Wanneer niet gelijktijdig het HEIGHT attribuut wordt opgenomen, wordt de hoogte in dezelfde verhouding als de breedte gewijzigd.

HEIGHT

HTML	3.2
NN	1.1
MSIE	1.0
OP	2.1

Met het HEIGHT attribuut wordt de hoogte van de afbeelding vastgelegd.
De opbouw is:

<IMG
HEIGHT="waarde" ..>

De waarde kan uitgedrukt worden in pixels, of als percentage van de beschikbare hoogte. Het gebruik van een percentage wordt slechts zeer beperkt ondersteund en leidt bij sommige browsers tot problemen bij de weergave. Aangeraden wordt daarom alleen een waarde in pixels op te nemen.
Het opgeven van de afmetingen van een afbeelding spaart tijd, omdat de browser het voor de afbeelding benodigde gebied vooraf kan berekenen en met het plaatsen van de rest van de inhoud van het document niet hoeft te wachten tot de afbeelding geheel geladen is. De afmetingen kunnen gevonden worden met behulp van een grafische editor, zoals Paint Shop Pro. Daarnaast hebben veel HTML-editors een wizard voor het opnemen van afbeeldingen, die automatisch de afmetingen vastlegt.
Het HEIGHT attribuut kan ook gebruikt worden om de afbeelding in een andere dan de eigen hoogte weer te geven. Wanneer niet gelijktijdig het WIDTH attribuut wordt opgenomen, wordt de breedte in dezelfde verhouding als de hoogte gewijzigd.

ALIGN

HTML	2.0
NN	1.0
MSIE	1.0
OP	2.1

Met het ALIGN attribuut wordt bepaald hoe de omringende inhoud van het document uitgelijnd wordt ten opzichte van de afbeelding.
De opbouw is:

<IMG ALIGN="waarde" ..>

De waarde kan betrekking hebben op de verticale uitlijning, of op de horizontale uitlijning. Bij de horizontale uitlijning ontstaan zogenaamde zwevende afbeeldingen.

Mogelijke waarden voor de verticale uitlijning zijn:

top: de bovenkant van het grootste item op de regel (dat kan zowel een letter zijn als andere inline inhoud, bijvoorbeeld een tweede afbeelding) wordt in lijn geplaatst met de bovenzijde van de afbeelding
middle: de basislijn van de regel wordt in lijn geplaatst met het midden van de afbeelding
bottom: de basislijn van de regel wordt in lijn geplaatst met de onderzijde van de afbeelding (dit is de standaardwaarde)

De volgende waarden maken geen deel uit van HTML 4.0, maar worden door sommige browsers wel ondersteund:

texttop: de bovenkant van de grootste letter in de tekst op de regel wordt in lijn geplaatst met de bovenzijde van de afbeelding (vaak ziet het resultaat er hetzelfde uit als bij ALIGN="top")
absmiddle: het midden van de regel wordt uitgelijnd met het midden van de afbeelding
baseline: de basislijn van de regel wordt in lijn geplaatst met de onderzijde van de afbeelding (dit is hetzelfde als ALIGN="bottom")
absbottom: de onderkant van de regel wordt uitgelijnd met de onderzijde van de afbeelding

Een kanttekening bij het gebruiken van de mogelijkheden voor de verticale uitlijning is hier op z'n plaats: niet elke browser zal alle mogelijkheden (op dezelfde manier) weergeven zoals hiervoor beschreven. Het resultaat wat je te zien krijgt via je eigen browser, kan er in de browser van de bezoeker van je pagina dus waarschijnlijk net even anders uitzien.

Als bij gebruik van één van de mogelijkheden voor de verticale uitlijning de na de afbeelding volgende inline inhoud langer is dan naast de afbeelding op één regel past, dan wordt de resterende inhoud op de volgende regel(s) onder de afbeelding geplaatst.

Mogelijke waarden voor de horizontale uitlijning zijn:

left: de afbeelding wordt op de eerste open ruimte aan de linker kantlijn geplaatst en de overige inhoud wordt langs de rechterzijde van de afbeelding uitgelijnd
right: de afbeelding wordt op de eerste open ruimte aan de rechter kantlijn geplaatst en de overige inhoud wordt links daarvan langs de linker kantlijn uitgelijnd

Bij het gebruik van de mogelijkheden voor de horizontale uitlijning worden naast de afbeelding zoveel regels geplaatst als de hoogte van de afbeelding toelaat. De volgende regels lopen ook onder de afbeelding door.

BORDER

HTML	2.0
NN	1.1
MSIE	1.0
OP	2.1

Met het BORDER attribuut kan de dikte van de rand om een afbeelding worden bepaald.
De opbouw is:

<IMG BORDER="waarde" ..>

De waarde is een getal dat de dikte van de rand in pixels aangeeft.
De standaardwaarde is "0" pixels, behalve voor afbeeldingen welke in een hyperlink zijn opgenomen. Met de waarde "0" wordt ook bij afbeeldingen in een hyperlink de rand weggelaten.
In Microsoft Internet Explorer 1, 2 en 3 werkt het BORDER attribuut alleen als de afbeelding in een hyperlink is opgenomen.

HSPACE

HTML	3.2
NN	1.1
MSIE	1.0
OP	2.1

Met het HSPACE attribuut wordt de ruimte aangegeven, welke zowel links als rechts naast de afbeelding wordt vrij gehouden. Door dit attribuut op te nemen, wordt voorkomen dat de tekst te dicht tegen de afbeelding geplaatst wordt, of afbeeldingen te dicht tegen elkaar.
De opbouw is:

<IMG HSPACE="waarde" ..>

De waarde is een getal dat de vrije ruimte in pixels aangeeft.

VSPACE

HTML	3.2
NN	1.1
MSIE	1.0
OP	2.1

Met het VSPACE attribuut wordt de ruimte aangegeven, welke zowel boven als onder de afbeelding wordt vrij gehouden. Door dit attribuut op te nemen, wordt voorkomen dat de tekst te dicht tegen de afbeelding geplaatst wordt, of afbeeldingen te dicht tegen elkaar.
De opbouw is:

<IMG VSPACE="waarde" ..>

De waarde is een getal dat de vrije ruimte in pixels aangeeft.

USEMAP

HTML	3.2
NN	1.0
MSIE	1.0
OP	2.1

Het USEMAP attribuut wordt gebruikt wanneer de (via het SRC attribuut opgegeven) afbeelding een "client-side image map" is, ofwel een aanklikbare afbeelding waarvan de werking gecontroleerd wordt door de browser (de client). De aanklikbare afbeelding is opgedeeld in verschillende gebieden, waarbij aan elk gebied een bestemming is gekoppeld. Als je op zo'n gebied in de afbeelding klikt, ga je naar die bestemming. Het USEMAP attribuut specificeert een verwijzing naar een via het MAP element gedefinieerde "map", waarin de bij de afbeelding behorende gegevens (de vorm en coördinaten van de gebieden en de bijbehorende bestemmingen) gevonden kunnen worden.
De opbouw is:

<IMG SRC="URI_afbeelding" USEMAP="URI_map#map_naam" ..>

Voor een toelichting op de URI zie het SRC attribuut.
Als de map-gegevens in hetzelfde document wordt opgenomen, is het voldoende alleen de naam van de map op te geven:

USEMAP="#map_naam"

Het gebruik van client-side image maps heeft de voorkeur boven het gebruik van server-side image maps. Enerzijds omdat er ook in tekst-georiënteerde browsers gebruik van gemaakt kan worden, anderzijds omdat de gebruiker direct kan zien of hij/zij over een actief gebied gaat. Een voordeel van client-side image maps is bovendien dat je niet afhankelijk bent van de beschikbaarheid een cgi-script op de server.

ISMAP

HTML	2.0
NN	1.0
MSIE	1.0
OP	2.1

Het ISMAP attribuut geeft aan dat de afbeelding een zogenaamde "server-side image map" is, ofwel een aanklikbare afbeelding waarvan de werking gecontroleerd wordt door (een cgi-script op) de server. De aanklikbare afbeelding is opgedeeld in verschillende gebieden. Als je op de afbeelding klikt, worden de coördinaten van de plaats op de afbeelding waar je klikt naar het (via het HREF attribuut van het A element opgegeven) cgi-script op de server verstuurd. Op basis van de coördinaten bepaalt het cgi-script op welk gebied je hebt geklikt en wat de bijbehorende bestemming is.
De opbouw is:

<A HREF="URI"><IMG SRC="URI_afbeelding" ISMAP ..></A>

LOWSRC

HTML	-
NN	1.0
MSIE	-
OP	-

Het LOWSRC attribuut kan gebruikt worden om twee afbeeldingen achter elkaar op dezelfde plaats te laden. De eerste in een lage resolutie (daardoor klein van omvang en dus snel), de tweede nadat alle tekst en afbeeldingen uit het document zijn geladen, in een hoge resolutie (daardoor groot van omvang en dus langzaam).
De opbouw is:

<IMG SRC="URI_hoog" LOWSRC="URI_laag" ..>

Voor een toelichting op de URI zie het SRC attribuut.
Browsers die het LOWSRC attribuut niet ondersteunen, laden automatisch de afbeelding welke gedefinieerd is via het SRC attribuut. Gebruik daarom het LOWSRC attribuut nooit zonder zonder het SRC attribuut. Wanneer de attributen WIDTH en HEIGHT niet gebruikt zijn, krijgt de afbeelding opgeroepen door het SRC attribuut de afmetingen van de afbeelding opgeroepen door het LOWSRC attribuut en kan dus groter of kleiner dan bedoeld worden weergegeven.

NAME

HTML	4.01
NN	3.0
MSIE	4.0
OP	3.0

Het NAME attribuut kan gebruikt worden om een naam aan een afbeelding te geven, zodat er naar verwezen kan worden vanuit scripts.
De opbouw is:

<IMG NAME="naam" ..>

De naam is case-insensitive, dat wil zeggen dat geen onderscheid gemaakt wordt tussen hoofd- en kleine letters.
Het NAME attribuut is toegevoegd in HTML 4.01 omdat veel browsers het ID attribuut niet en het NAME attribuut wel ondersteunen als identificatiekenmerk voor verwijzingen vanuit scripts.
De attributen NAME en ID mogen alleen gelijktijdig voor hetzelfde IMG element worden gebruikt, indien ze dezelfde waarde hebben.

Inhoud Handleiding HTML Index Overzicht elementen