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

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="gezicht.gif" ALT="Foto 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="gezicht.gif" ALT="Foto 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.

De afstand tussen de afbeelding en de erop volgende inhoud van het document kun je ook vastleggen door met behulp van de eigenschappen voor de margin een stijl te definiëren. Deze mogelijkheid geeft je veel meer flexibiliteit, omdat je de afstand per kant van de afbeelding kunt aangeven.

In het volgende voorbeeld wordt in één keer de weergave van alle afbeeldingen in een document bepaald, door het opnemen van een stijl voor het IMG element in een stijlblok in de head van het document. Met de margin-right eigenschap wordt vastgelegd dat rechts van elke afbeelding 15 pixels ruimte wordt vrijgehouden.

Het stijlblok staat in de head van het document.

<STYLE TYPE="text/css">
<!--
IMG { margin-right: 15px; }
-->
</STYLE>

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

<IMG SRC="gezicht.gif" ALT="Foto gezicht" WIDTH="105" HEIGHT="125"> Bijschrift

Rechts is de weergave door de browser te zien en links een schermafdruk van de bedoelde weergave.

Vervolg: Omschrijving in tooltip

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

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