HTML Afbeeldingen


Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie afbeeldingen | Opnemen afbeelding | Rand om afbeelding | Verticaal uitlijnen afbeelding | Horizontaal uitlijnen afbeelding | Ruimte rond de afbeelding | Omschrijving in tooltip | Speciale functie afbeelding | Image maps | Client-side image maps | Voorbeelden image maps | Tooltips voor image maps

Gerelateerde elementen: AREA | IMG | MAP


Introductie afbeeldingen

Op een HTML-pagina kunnen naast tekst ook afbeeldingen opgenomen worden. Dat gebeurt met behulp van het IMG element. Aan het IMG element voeg je minimaal de attributen SRC en ALT toe. Het SRC attribuut bepaalt welke afbeelding moet worden geladen. Met het ALT attribuut geef je een omschrijving op, welke in plaats van de afbeelding wordt weergegeven in tekst-georiënteerde browsers. De attributen WIDTH en HEIGHT gebruik je om de afmetingen van de afbeelding op te geven. De browser weet dan welke ruimte voor de afbeelding gereserveerd moet worden en kan daardoor de tekst, welke op de afbeelding volgt, sneller weergegeven.
Met het BORDER attribuut bepaal je de dikte van de rand om de afbeelding. Het ALIGN attribuut kun je gebruiken om de afbeelding verticaal of horizontaal uit te lijnen en met de attributen HSPACE en VSPACE creëer je ruimte rond de afbeelding.
Met het TITLE attribuut kun je tekst opnemen, welke in de nieuwste browsers in een tooltip te zien is als je met de muis boven de afbeelding komt

In plaats van het opnemen van veel attributen van het IMG element kun je ook stijlen definiëren met behulp van stylesheets. In de voorbeelden hierna wordt deze mogelijkheid toegelicht. Hoewel alle gangbare browsers het gebruik van stijlen ondersteunen, doen ze dit niet altijd zonder problemen. Met name voor Netscape Navigator 4 geldt dat deze grote problemen heeft met stijlen gedefinieerd voor het IMG element en dat de weergave daardoor vaak nogal beroerd is. Geadviseerd wordt daarom je nog niet geheel te verlaten op stijlen en in ieder geval een zodanige constructie te kiezen dat Netscape Navigator 4 de stijlen niet mag weergeven. Zie hiervoor het onderdeel CSS en browsers.

Hoewel het gebruik van afbeeldingen een HTML-pagina zeker aantrekkelijker kan maken voor een bezoeker, is het aan te bevelen er voorzichtig mee om te gaan. Veel en vooral grote afbeeldingen vragen een lange downloadtijd en daardoor geduld van de bezoeker. De vraag is of deze dat altijd kan opbrengen en niet al voortijdig afhaakt. Beperk daarom het aantal afbeeldingen in een document en gebruik bij voorkeur kleine afbeeldingen. Zo nodig kan de bezoeker de mogelijkheid geboden worden een grotere versie te openen, door op de opgenomen kleine afbeelding te klikken.

Een bijzonder gebruik van afbeeldingen betreft image maps, ook wel aanklikbare afbeeldingen genoemd. Een image map is een afbeelding die (al dan niet zichtbaar) is opgedeeld in verschillende gebieden, waarbij aan elk gebied een hyperlink kan worden gekoppeld. Als je binnen zo'n gebied in de afbeelding klikt, spring je naar de in de hyperlink gedefinieerde bestemming.


Vervolg: Opnemen afbeelding



Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 5 december 2004