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


Speciale functie afbeelding

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

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

Lijn in regenboogkleuren


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.html">Lijsten</A></BR>
<IMG SRC="redball.gif" ALT="" WIDTH="14" HEIGHT="14" HSPACE="5"><A HREF="tabellen.html">Tabellen</A></BR>
<IMG SRC="redball.gif" ALT="" WIDTH="14" HEIGHT="14" HSPACE="5"><A HREF="frames.html">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 stylesheets gemaakt worden. Zie een voorbeeld 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="https://www.handleidinghtml.nl/"><IMG SRC="handleiding-html.gif" ALT="Bezoek de Handleiding HTML" WIDTH="84" HEIGHT="27" ALIGN="bottom"></A>

In de browser zie je: Bezoek de Handleiding HTML

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.

<A HREF="https://www.handleidinghtml.nl/"><IMG SRC="handleiding-html.gif" ALT="Bezoek de Handleiding HTML" WIDTH="84" HEIGHT="27" BORDER="0" ALIGN="bottom"></A>

In de browser zie je: Bezoek de Handleiding HTML

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.


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="usa3.gif"><IMG SRC="usa2.gif" ALT="Monument Valley" WIDTH="150" HEIGHT="102" BORDER="0" ALIGN="bottom"></A> &nbsp; Klik op de afbeelding om een grotere foto te zien.

Monument Valley   Klik op de afbeelding om een grotere foto te zien. Gebruik de terugknop van de browser om op deze pagina terug te komen.

In plaats van in het huidige browservenster kun je de grotere afbeelding ook openen in een nieuw browservenster of (afhankelijk van de instelling van de browser) in een nieuw tabblad. Dat kan door aan het toevoegen van het TARGET attribuut aan het A element met de waarde "_blank" (zie voor meer informatie het onderdeel Hyperlinks):

<A HREF="usa3.gif" TARGET="_blank"><IMG SRC="usa2.gif" ALT="Monument Valley" WIDTH="150" HEIGHT="102" BORDER="0" ALIGN="bottom"></A> &nbsp; Klik op de afbeelding om een grotere foto te zien.

Monument Valley   Klik op de afbeelding om een grotere foto te zien.

Als alternatief kan met behulp van JavaScript een nieuw venster op maat gemaakt worden. Zie daarvoor de JavaScript voorbeelden.


Vervolg: Image maps



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

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 2 augustus 2018