HTML beschrijving element IMG


Handleiding HTML Legenda | HTML-elementen | Inhoud HTML | Inhoud CSS | Begin


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

De beschrijving van de attributen CLASS, DIR, ID, LANG, STYLE en TITLE 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
IE 1.0
NN 1.0
MOZ 1.0
FF 1.0
OP 2.1
Het IMG element gebruik je om een afbeelding in een HTML-document op te nemen.
De opbouw is:

<IMG ..>

Het IMG element heeft alleen attributen en geen inhoud. Een beëindiging 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.

DTD HTML 4.0: strict, transitional, frameset
Beëindiging: verboden
Inhoud: - (het element is leeg)
Mag zijn opgenomen in: CAPTION, DD, DEL, DT, INS, LEGEND, LI, TD en TH;
elementen op blokniveau met uitzondering van DIR, DL, MENU, OL, PRE, TABLE en UL;
inline elementen met uitzondering van MAP, SCRIPT, SELECT en TEXTAREA;
Vereiste attributen: ALT en SRC
ALIGN


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 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.

In HTML 4.0 heeft het ALIGN attribuut het label afgekeurd gekregen. Als alternatief kan met behulp van de eigenschappen vertical-align (voor de verticale uitlijning) en float (voor de horizontale uitlijning) een stijl gedefinieerd worden. Omdat oudere browsers stijlen niet ondersteunen, blijft het gebruik van afgekeurde elementen en attributen voorlopig toegestaan.
ALT


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 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.
De opbouw is:

<IMG ALT="omschrijving afbeelding" ..>

ALT is een vereist attribuut. Geadviseerd wordt het altijd te gebruiken.

Microsoft Internet Explorer 3.0 en hoger en Netscape Navigator 4 geven de waarde van het ALT attribuut ook weer in een tooltip (een klein venster met extra informatie), wanneer de muisaanwijzer zich boven de afbeelding bevindt. Daarvoor is volgens de regels echter niet het ALT attribuut bedoeld, maar het TITLE attribuut. Dat attribuut wordt ondersteund door Microsoft Internet Explorer 4.0 en hoger, Mozilla, Netscape Navigator 6.0 en hoger en Opera 5.0 en hoger.
BORDER


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 1.0
OP 2.1
Met het BORDER attribuut wordt de dikte van de rand om een afbeelding 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.

In HTML 4.0 heeft het BORDER attribuut het label afgekeurd gekregen. Als alternatief kan met behulp van de eigenschappen voor randen een stijl gedefinieerd worden. Omdat oudere browsers stijlen niet ondersteunen, blijft het gebruik van afgekeurde elementen en attributen voorlopig toegestaan.
HEIGHT


HTML 3.2
IE 1.0
NN 1.1
MOZ 1.0
FF 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 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.

Microsoft Internet Explorer 6.0 ondersteunt (behalve in de standards modus) geen percentage voor de hoogte. De hoogte wordt berekend vanuit de breedte, waarbij de oorspronkelijke hoogte/breedte verhouding wordt aangehouden.
Netscape Navigator 6.0/6.1 geeft afbeeldingen niet weer als een percentage voor de hoogte is gebruikt.
HSPACE


HTML 3.2
IE 1.0
NN 1.0
MOZ 1.0
FF 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.

In HTML 4.0 heeft het HSPACE attribuut het label afgekeurd gekregen. Als alternatief kan met behulp van de eigenschappen margin-left en margin-right een stijl gedefinieerd worden. Omdat oudere browsers stijlen niet ondersteunen, blijft het gebruik van afgekeurde elementen en attributen voorlopig toegestaan.
ISMAP


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 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>
LONGDESC


HTML 4.0
IE -
NN 6.1
MOZ 1.0
FF 1.0
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 (spraaksynthesizer, braille-apparaat).
De opbouw is:

<IMG LONGDESC="URI" ..>

Voor een toelichting op de URI zie het SRC attribuut.
LOWSRC


HTML -
IE -
NN (1.0)
MOZ -
FF -
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 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.

Het LOWSRC attribuut maakt geen deel uit van HTML 4.0 en wordt niet meer ondersteund door Netscape Navigator 6.1 en hoger.
NAME


HTML 4.01
IE 4.0
NN 3.0
MOZ 1.0
FF 1.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 hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of de naam in hoofdletters of in kleine letters wordt geschreven.
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.
SRC


HTML 2.0
IE 1.0
NN 1.0
MOZ 1.0
FF 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 ondersteund wordt door Microsoft Internet Explorer vanaf versie 4, Netscape Navigator vanaf versie 4 (in versie 4 echter geen transparante achtergrond) en Opera vanaf versie 3.5, 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
USEMAP


HTML 3.2
IE 1.0
NN 1.0
MOZ 1.0
FF 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.
VSPACE


HTML 3.2
IE 1.0
NN 1.0
MOZ 1.0
FF 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.

In HTML 4.0 heeft het VSPACE attribuut het label afgekeurd gekregen. Als alternatief kan met behulp van de eigenschappen margin-top en margin-bottom een stijl gedefinieerd worden. Omdat oudere browsers stijlen niet ondersteunen, blijft het gebruik van afgekeurde elementen en attributen voorlopig toegestaan.
WIDTH


HTML 3.2
IE 1.0
NN 1.1
MOZ 1.0
FF 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 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.



Legenda | HTML-elementen | Inhoud HTML | Inhoud CSS | Begin

Handleiding HTML (http://www.handleidinghtml.nl/)
Copyright © 1995-2016 Hans de Jong
Laatste wijziging: 16 januari 2005