Afbeeldingen en image maps

In dit onderdeel komen aan de orde Introductie, Elementen, Afbeeldingen opnemen, Verticaal uitlijnen, Zwevende afbeeldingen, Ruimte rond de afbeelding, Omschrijving in tooltip, Divers gebruik afbeeldingen, Het gebruik van stijlen, Image maps, Client-side image maps en Voorbeelden image maps.

Introductie

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 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

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 in zo'n gebied in de afbeelding klikt, spring je naar de in de hyperlink gedefinieerde bestemming.

Elementen

Voor het opnemen van afbeeldingen en image maps zijn de volgende elementen beschikbaar:

De elementen en bijbehorende attributen worden beschreven in aparte documenten. Voor elk element en attribuut is aangegeven of het deel uitmaakt van een HTML-specificatie en zo ja welke. Bovendien is aangegeven en of het element of attribuut ondersteund wordt door en zo ja vanaf welke versie van Microsoft Internet Explorer, Mozilla, Netscape Navigator en Opera.

Afbeeldingen opnemen

Een afbeelding definieer je met 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-geörineteerde browsers. Het is verstandig ook altijd de attributen WIDTH en HEIGHT te gebruiken om de afmetingen van de afbeelding vast te leggen. De browser weet dan welke ruimte voor de afbeelding gereserveerd moet worden en kan daardoor de tekst, welke op de afbeelding volgt, eerder weergegeven. In het volgende voorbeeld zijn de genoemde attributen gebruikt.

<IMG SRC="usa1.gif" WIDTH="140" HEIGHT="100" ALT="Monument Valley">

Soms worden de attributen WIDTH en HEIGHT gebruikt om een afbeelding groter of kleiner weer te geven dan hij eigenlijk is. Voorzichtigheid is echter op z'n plaats, omdat de kwaliteit van de afbeelding er vaak op achteruit gaat (zeker als er tekst in de afbeelding is opgenomen). In het volgende voorbeeld zijn achtereenvolgens het origineel, een verkleining en een vergroting van een afbeelding te zien.

<IMG SRC="formaat.gif" ALT="Originele afbeelding" WIDTH="120" HEIGHT="140" BORDER="1">
<IMG SRC="formaat.gif" ALT="De afbeelding verkleind" WIDTH="60" HEIGHT="70" BORDER="1">
<IMG SRC="formaat.gif" ALT="De afbeelding vergroot" WIDTH="240" HEIGHT="280" BORDER="1">

Het BORDER attribuut gebruik je om de dikte van de rand om de afbeelding op te geven. Bij Microsoft Internet Explorer 1, 2 en 3 werkt dit overigens alleen als de afbeelding in een hyperlink is opgenomen.

<IMG SRC="usa1.gif" WIDTH="140" HEIGHT="100" BORDER="3" ALT="Monument Valley">

Verticaal uitlijnen

Het IMG element is een zogenaamd inline element. Een afbeelding en de omringende tekst kunnen daardoor samen op één regel voorkomen. De hoogte van deze regel wordt bepaald door het hoogste onderdeel. Vaak zal dat de afbeelding zijn. Met het ALIGN attribuut en de waarden "top", "middle" of "bottom" wordt bepaald hoe de tekst op de regel in verticale richting uitgelijnd wordt ten opzichte van de afbeelding. Als na de afbeelding onvoldoende ruimte is op de regel om alle tekst te plaatsen, dan wordt de resterende tekst zoals gebruikelijk op de volgende regel(s) onder de afbeelding geplaatst.

<IMG SRC="face.gif" ALT="Gezicht" WIDTH="105" HEIGHT="125" ALIGN="top">

ALIGN="top"

ALIGN="middle"

ALIGN="bottom"

Zwevende afbeeldingen

Met het ALIGN attribuut en de waarden "left" en "right" kun je de afbeelding links of rechts op de pagina plaatsen en zogenaamde zwevende afbeeldingen maken.

<IMG SRC="eyes.gif" ALT="Ogen" WIDTH="105" HEIGHT="45" ALIGN="left">

Voor deze afbeelding is het ALIGN attribuut met de waarde "left" gebruikt. Naast de afbeelding worden zoveel regels tekst geplaatst als de hoogte van de afbeelding toelaat. De volgende regels lopen ook onder de afbeelding door. Is de hoeveelheid tekst kleiner dan naast de afbeelding past, dan is het verstandig het BR element met het attribuut CLEAR te gebruiken. Daarmee voorkom je dat een volgende alinea, of afbeelding onbedoeld naast in plaats van onder de afbeelding terecht komt.

<IMG SRC="eyes.gif" ALT="Ogen" WIDTH="105" HEIGHT="45" ALIGN="right"> ...<BR CLEAR="all">

Voor deze afbeelding is het ALIGN attribuut met de waarde "right" gebruikt.

Via het ALIGN attribuut van het IMG element is het niet mogelijk een afbeelding in het midden van de pagina plaatsen. Daarvoor kan echter het DIV element gebruikt worden met het ALIGN. Van een zwevende afbeelding met meerdere regels tekst ernaast is echter geen sprake meer.

<DIV ALIGN="center"><IMG SRC="face.gif" ALT="Gezicht" WIDTH="105" HEIGHT="125"></DIV>

Ruimte rond de afbeelding

De HSPACE attribuut kan gebruikt worden om zowel links als rechts van de afbeelding ruimte te scheppen tot de overige inhoud van het document. Het VSPACE attribuut doet hetzelfde boven en onder de afbeelding.

<IMG SRC="face.gif" ALT="Gezicht" WIDTH="105" HEIGHT="125" HSPACE="10">

HSPACE="10"

HSPACE="30"

Het HSPACE attribuut zorgt ervoor dat zowel links als rechts van de afbeelding ruimte ontstaat. Soms wil je echter alleen maar ruimte aan één kant hebben. Bijvoorbeeld als de afbeelding langs de linker kantlijn moet blijven staan, maar wat afstand moet krijgen tot een andere afbeelding rechts ervan. In dat geval kun je beter gebruik maken van het speciale teken " " (non-breaking space). Dit teken wordt door de browser geïnterpreteerd als karakter en dus niet samengevoegd met de gewone spaties. In het volgende voorbeeld is daardoor het resultaat een vrije ruimte van 4 spaties.

<IMG SRC="face.gif" ALT="Gezicht" WIDTH="105" HEIGHT="125"> &nbsp;&nbsp; <IMG ...>

Wanneer je afstand wilt creëren tussen een afbeelding en tekst rechts ervan, dan kun je de oplossing met " " alleen gebruiken als alle tekst op dezelfde regel past. Is dat niet het geval, dan kun je als alternatief gebruik maken van een tabel. Je plaatst dan de afbeelding in de ene cel en de tekst in de cel ernaast.

Omschrijving in tooltip

Regelmatig blijkt er behoefte te zijn aan het weergeven van een zogenaamde tooltip, die verschijnt als de muis boven de afbeelding komt. In deze tooltip moet daarbij een omschrijving van de afbeelding te zien zijn. Bij een aantal browsers (Microsoft Internet Explorer 3 en hoger en van Netscape Navigator alleen versie 4) kun je hiervoor het ALT attribuut gebruiken. Andere browsers geven de waarde van het ALT attribuut echter niet in een tooltip weer. In de nieuwere versies van deze browsers kun je evenwel vaak hetzelfde effect bereiken met behulp van het TITLE attribuut. Het TITLE attribuut is speciaal bedoeld voor de weergave van extra informatie en wordt ondersteund door Microsoft Internet Explorer vanaf versie 4, Netscape Navigator 6 en Opera vanaf versie 5. Wil je in een zo groot mogelijk aantal browsers de tooltip zien, dan neem je zowel het TITLE als het ALT attribuut op met dezelfde waarde.

<IMG SRC="usa1.gif" WIDTH="140" HEIGHT="100" ALT="Monument Valley" TITLE="Monument Valley">

Divers gebruik afbeeldingen

Een afbeelding kun je bijvoorbeeld gebruiken in plaats van een standaard horizontale lijn:

<IMG SRC="rainline.gif" ALT="Lijn in regenboogkleuren" WIDTH="100%" HEIGHT="5">

Een afbeelding kun je ook gebruiken om een alternatieve lijst te maken, bijvoorbeeld een inhoudsopgave. In zo'n geval heeft een alternatieve omschrijving van de afbeelding weinig nut en kun je maar beter geen waarde voor het ALT attribuut invullen.

<IMG SRC="redball.gif" ALT="" WIDTH="14" HEIGHT="14" HSPACE="5"><A HREF="lijsten.htm">Lijsten</A></BR>
<IMG SRC="redball.gif" ALT="" WIDTH="14" HEIGHT="14" HSPACE="5"><A HREF="tabellen.htm">Tabellen</A></BR>
<IMG SRC="redball.gif" ALT="" WIDTH="14" HEIGHT="14" HSPACE="5"><A HREF="frames.htm">Frames</A>

In de browser ziet het als volgt uit:

Lijsten
Tabellen
Frames

Bij de nieuwe generatie browsers kan een dergelijke lijst overigens ook met behulp van Cascading Style Sheets gemaakt worden. Zie een voorbeeld bij Het gebruik van stijlen in het onderdeel lijsten.

In het volgende voorbeeld wordt een afbeelding geplaatst in een hyperlink. Door op de afbeelding te klikken, spring je naar de bijbehorende bestemming.

<A HREF="http://www.dsdelft.nl"><IMG SRC="dsdelftbutton.gif" ALT="Bezoek de Digitale Stad Delft" WIDTH="38" HEIGHT="35" ALIGN="bottom"></A>

In de browser zie je:

Zorg ervoor dat je de hyperlink niet met harde returns (met Enter naar de volgende regel gaan) onderbreekt. Sommige browsers vatten een harde return op als een spatie en onderstrepen die net als een gewone hyperlink. Je ziet dat als een underscore direct na de afbeelding.

Met het BORDER attribuut van het IMG element kan de rand om de afbeelding in het voorbeeld weggelaten worden. Het is echter verstandig hiermee voorzichtig om te gaan, om te voorkomen dat de bezoeker van de pagina niet in de gaten heeft, dat het hier een hyperlink betreft.

Het plaatsen van de afbeelding in een hyperlink kan ook gebruikt worden om de bezoeker de mogelijkheid te bieden een grotere afbeelding te bekijken.

<A HREF="usa2.gif"><IMG SRC="usa1.gif" ALT="Monument Valley" WIDTH="140" HEIGHT="100" ALIGN="bottom"></A> &nbsp; Klik op de afbeelding om de hele foto te zien.

  Klik op de afbeelding om de hele foto te zien.

Het gebruik van stijlen

Voor afbeeldingen kunnen met behulp van Cascading Style Sheets stijlen gedefinieerd worden. Dat kan als inline stijlen met behulp van de attributen STYLE, CLASS of ID, maar het kan ook meer algemeen door het vastleggen van de stijleigenschappen in een stijlblok in de head van het document of in een extern stijlblad.

In het volgende voorbeeld wordt in één keer de weergave van alle afbeeldingen in een document bepaald, door het opnemen van de stijleigenschappen voor het IMG element in een stijlblok. Met de vertical-align eigenschap wordt de uitlijning van de tekst ten opzichte van de afbeelding vastgelegd, de margin-right eigenschap zorgt dat er rechts van de afbeelding ruimte wordt vrijgehouden en de border eigenschap bepaalt hoe de rand om de afbeelding wordt weergegeven.

Het stijlblok staat in de head van het document.

<STYLE TYPE="text/css">
<!--
IMG { vertical-align: top; margin-right: 15px; border: solid black 2px; }
-->
</STYLE>

In de body van het document is het IMG element opgenomen zonder verdere verwijzing naar de stijlen.

<IMG SRC="face.gif" ALT="Gezicht" WIDTH="105" HEIGHT="125">

Van de weergave van dit voorbeeld door Microsoft Internet Explorer 4 is een afbeelding opgenomen. Klik op de afbeelding en bekijk in een nieuw venster of de browser het gebruik van stijlen (correct) ondersteunt.

De in het voorbeeld gebruikte stijleigenschappen vervangen de attributen ALIGN, HSPACE en BORDER, welke aan elk IMG element afzonderlijk moeten worden toegevoegd. Op dit moment is het echter verstandig je nog niet geheel te verlaten op het Cascading Style Sheets, omdat het aantal browsers dat deze ondersteunen nog maar heel beperkt is. Voor Netscape Navigator 4, welke het gebruik van stijlen wel ondersteunt, geldt dat deze grote problemen kent in de relatie afbeeldingen en stijlen en dat de weergave daardoor vaak nogal beroerd is. Geadviseerd wordt daarom stijlen voor afbeeldingen alleen via browser-specifieke stijlbladen toe te passen.

Image maps

Een image map is een afbeelding die (al dan niet zichtbaar) is opgedeeld in gebieden waaraan een hyperlink is gekoppeld. Als je in zo'n gebied in de afbeelding klikt, spring je naar de in de hyperlink gedefinieerde bestemming.
Van de image maps zijn er twee typen:

• Server-side image maps, waarvan de werking gecontroleerd wordt door de server. Om van dit soort image maps gebruik te kunnen maken, moet je op de server een cgi-script kunnen activeren. In veel gevallen zal een provider die mogelijkheid niet bieden aan individuele gebruikers.
• Client-side image maps, waarvan de werking gecontroleerd wordt door de client, ofwel de browser. Alle benodigde informatie in de door de auteur gemaakt documenten wordt direct door de browser geïnterpreteerd. Als auteur ben je hierdoor niet meer afhankelijk van de aanwezigheid een cgi-script op de server en daardoor veel vrijer in het gebruik van image maps.

In deze handleiding worden alleen de client-side image maps behandeld.

Client-side image maps

Om aan te geven dat het bij een afbeelding gaat om een image map, moet je aan het IMG element naast het SRC attribuut ook het USEMAP attribuut toevoegen. Het USEMAP attribuut specificeert de verwijzing naar een "map", waarin de browser de informatie over de image map kan vinden. Het begin en einde van de "map" zelf wordt gedefinieerd met het MAP element. Het MAP element bevat in ieder geval het NAME attribuut. De waarde van het NAME attribuut moet overeenkomen met de waarde van het USEMAP attribuut van het IMG element.
Binnen het MAP element worden één of meer AREA elementen opgenomen. Elk AREA element legt van één aanklikbaar gebied met behulp van de attributen SHAPE, COORDS en HREF respectievelijk de vorm, de coördinaten en de bestemming vast. Door het ALT attribuut te gebruiken en daarin een omschrijving van de bestemming op te nemen, maak je het mogelijk dat ook gebruikers van een tekst-geörienteerde browser de hyperlink kunnen activeren. Wanneer je het NOHREF in plaats van het HREF opneemt, dan geef je aan dat klikken in het betreffende gebied niet tot een actie moet leiden.

Met SHAPE attribuut van het AREA element kunnen drie vormen van gebieden worden vastgelegd: een rechthoek, een veelhoek en een cirkel. De wijze waarop je met het COORDS attribuut de coördinaten van een gebied vastlegt, hangt af van de vorm:

• rechthoek (rect): de waarde van het COORDS attribuut bevat vier getallen, die van het gebied achtereenvolgens de positie van de linker bovenhoek in horizontale richting, de positie van de linkerbovenhoek in verticale richting, de positie van de rechter benedenhoek in horizontale richting en tenslotte de positie van de rechter benedenhoek in verticale richting vastleggen;
• veelhoek (poly): de waarde van het COORDS attribuut bevat voor een aantal hoekpunten een coördinatenpaar, waarbij voor elk hoekpunt eerst de positie in horizontale en vervolgens de positie in verticale richting wordt opgenomen;
• cirkel (circle): het COORDS attribuut bevat 3 getallen, die achtereenvolgens de positie van het middelpunt van de cirkel in horizontale en in verticale richting en de lengte van de straal vastlegt.

In alle gevallen wordt in horizontale richting (x) gemeten vanaf de linkerkant en in verticale richting (y) vanuit de bovenkant van de afbeelding. De afstand is in pixels en om het juiste gebied aan te geven, is het dus noodzakelijk dat je voor de attributen WIDTH en HEIGHT van het IMG element ook een waarde in pixels hebt opgenomen (en geen percentage).

Wanneer je van een afbeelding aanklikbare gebieden wilt definiëren (bijvoorbeeld afzonderlijke personen op een foto), dan zullen je in de praktijk vaak uitkomen op het gebruik van veelhoeken. In principe kun je van elke veelhoek van een onbeperkt aantal hoekpunten de coördinaten opnemen. Meestal is het echter niet noodzakelijk om de vorm van een gebied heel gedetailleerd vast te leggen. Een veelhoek met 5 à 6 hoekpunten is over het algemeen voldoende.

Bij het bepalen van de coördinaten is het handig gebruik te maken van een image-viewer/editor. Een aanrader is het gratis programma IrfanView. Wanneer je in dit programma op een punt in de afbeelding klikt, kun je links in de titelbalk van het venster de x- en y-positie van het punt aflezen.

Wanneer een browser image maps niet ondersteunt, wordt de afbeelding normaal weergegeven. Klikken op de afbeelding leidt in dat geval uiteraard niet tot het openen van een hyperlink.

Voorbeelden image maps

In het volgende voorbeeld wordt een afbeelding van een knoppenbalk gebruikt als client-side image map. Omdat de "map" in het document zelf is opgenomen, is het voldoende een interne verwijzing op te nemen: "#knoppenbalk".

<IMG SRC="knopbalk.gif" ALT="Knoppenbalk" WIDTH="390" HEIGHT="24" BORDER="0" USEMAP="#knoppenbalk">

Het MAP element bevat in ieder geval het NAME attribuut. De waarde van het NAME attribuut correspondeert met de waarde van het USEMAP attribuut van het IMG element: "knoppenbalk".
In het MAP element zijn een vijftal AREA elementen opgenomen. Het SHAPE attribuut, waarmee de vorm van het aanklikbare gebied wordt gespecificeerd, heeft in dit voorbeeld in alle gevallen de waarde "rect" (rechthoek). De coördinaten van elk aanklikbaar gebied zijn vastgelegd met het COORDS attribuut. Het ALT attribuut is opgenomen als omschrijving van de bestemming ten behoeve van het gebruik in tekst-geörienteerde browsers. Het is ligt voor de hand in de praktijk een wat duidelijkere omschrijving te kiezen dan in dit voorbeeld is gedaan.

<MAP NAME="knoppenbalk">
<AREA SHAPE="rect" COORDS="0,0,77,24" HREF="map1a.htm" ALT="Mogelijkheid 1">
<AREA SHAPE="rect" COORDS="78,0,155,24" HREF="map1b.htm" ALT="Mogelijkheid 2">
<AREA SHAPE="rect" COORDS="156,0,233,24" HREF="map1c.htm" ALT="Mogelijkheid 3">
<AREA SHAPE="rect" COORDS="234,0,311,24" HREF="map1d.htm" ALT="Mogelijkheid 4">
<AREA SHAPE="rect" COORDS="312,0,390,24" HREF="map1e.htm" ALT="Mogelijkheid 5">
</MAP>

Als je met de muis van links naar rechts over de knoppenbalk heen gaat, dan zie je in de statusbalk van de browser de URL wijzigen. Klik je op een knop, dan wordt de URL geactiveerd.

In het volgende voorbeeld zijn verschillende waarden gebruikt voor het SHAPE attribuut van het AREA element. In de afbeelding is de vorm van de gebieden heel direct te zien, in de praktijk zal dat vaak niet het geval zijn. Wel is het handig er op te letten, of het voor de bezoeker van je site voldoende duidelijk is waar hij of zij moet klikken om naar een bepaalde bestemming te gaan.
In het laatste AREA element is voor de gehele afbeelding het NOHREF attribuut opgegeven. Daarmee wordt vastgelegd dat geen hyperlink is opgenomen voor de gebieden, die niet apart gedefinieerd zijn in deze image map.

<IMG SRC="vormen.gif" ALT="Vormen" WIDTH="300" HEIGHT="150" BORDER="1" USEMAP="#vormen1">

<MAP NAME="vormen1">
<AREA SHAPE="rect" COORDS="15,15,95,93" HREF="map2a.htm" ALT="Rechthoek">
<AREA SHAPE="circle" COORDS="254,61,33" HREF="map2b.htm" ALT="Cirkel">
<AREA SHAPE="poly" COORDS="102,134, 120,75, 197,84, 208,129, 164,143" HREF="map2c.htm" ALT="Veelhoek">
<AREA SHAPE="rect" COORDS="0,0,300,150" NOHREF ALT="Geen vorm">
</MAP>

Als je met de muis over en tussen de figuren beweegt, dan zie je in de statusbalk van de browser de verschillende URL's opkomen en verdwijnen. Klik je op een figuur, dan wordt de bijbehorende URL geactiveerd.

In dezelfde image map wordt nu in het laatste AREA element voor de gehele image map een URL gedefinieerd, die geactiveerd wordt als je klikt op elk deel van de afbeelding dat niet tot de rechthoek, de cirkel, of de veelhoek behoort.

<MAP NAME="vormen2">
<AREA SHAPE="rect" COORDS="15,15,95,93" HREF="map3a.htm" ALT="Rechthoek">
<AREA SHAPE="circle" COORDS="254,61,33" HREF="map3b.htm" ALT="Cirkel">
<AREA SHAPE="poly" COORDS="102,134, 120,75, 197,84, 208,129, 164,143" HREF="map3c.htm" ALT="Veelhoek">
<AREA SHAPE="rect" COORDS="0,0,300,150" HREF="map3d.htm" ALT="Geen vorm">
</MAP>

In Netscape Navigator en Opera wordt hetzelfde effect bereikt als in het laatste AREA element in plaats van SHAPE="rect" COORDS="0,0,300,150" wordt opgenomen SHAPE="default". In Microsoft Internet Explorer werkt deze mogelijkheid echter niet.

Enkele voorbeelden waarbij gebruik gemaakt wordt van het OBJECT element, worden gegeven in het onderdeel Objecten.

  Inhoud Handleiding HTML   Trefwoordenregister   Inhoud Afbeeldingen en image maps

Laatste wijziging 23 juli 2002
Copyright © 1995-2002 Hans de Jong