Afbeeldingen en image maps

In dit onderdeel komen aan de orde Introductie, Image maps, Elementen, Afbeeldingen opnemen, Verticaal uitlijnen, Zwevende afbeeldingen, Ruimte rond de afbeelding, Divers gebruik afbeeldingen, Het gebruik van stijlen en Client-side 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 nieuwste browsers laten deze omschrijving bovendien zien in een tooltip, die verschijnt als je met de muis boven de afbeelding komt. 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.

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. Zonodig kan de bezoeker de mogelijkheid geboden worden een grotere versie te openen, door op de opgenomen kleine afbeelding te klikken.

Image maps

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

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 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.
Een MAP element bevat één of meer AREA elementen. Elk AREA element legt van één aanklikbaar gebied 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 een browser image maps niet ondersteunt, wordt de afbeelding normaal weergegeven, maar leidt klikken op de afbeelding niet tot het openen van een URL.

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 Netscape Navigator, Microsoft Internet Explorer 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="National Park">

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="National Park">

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="face.gif" ALT="Gezicht" WIDTH="105" HEIGHT="125" ALIGN="left">

ALIGN="left"


Als je gebruik maakt van het ALIGN attribuut met de waarden "left" of "right", worden naast de afbeelding 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="face.gif" ALT="Gezicht" WIDTH="105" HEIGHT="125" ALIGN="right"> ...<BR CLEAR="all">

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.

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="dsd.gif" ALT="Ga naar 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="National Park" 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.

Client-side image maps

In het volgende voorbeeld wordt een afbeelding van een knoppenbalk gebruikt als client-side image map. Aan het IMG element is daarom het USEMAP attribuut toegevoegd. Het USEMAP attribuut bevat de verwijzing naar de "map", waarin de gegevens over de aanklikbare afbeelding staan. In dit geval is de "map" in het document opgenomen en 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 alle gevallen de waarde "rect" (rechthoek). De coördinaten van het gebied zijn vastgelegd met het COORDS attribuut en met het HREF attribuut is aangegeven welk document geopend moet worden bij klikken een het gebied. Het ALT attribuut is opgenomen als omschrijving van de bestemming ten behoeve van het gebruik in tekst-geörienteerde browsers. Het is uiteraard verstandig 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 onderstaande afbeelding is de vorm van de gebieden heel direct te zien. Dat is echter geen verplichting, alleen is het natuurlijk wel handig dat het de bezoeker van je site 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 URL 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="100,133, 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="100,133, 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.

  Inhoud Handleiding HTML   Index   Inhoud Afbeeldingen en image maps

Laatste wijziging 15 augustus 2000
Copyright © 1995-2000 Hans de Jong