Klik hier voor de inhoudsopgave

HTML op het net - Printversie - Afbeeldingen
Originele URL: http://html.op-het.net/tekst/afbeeldingen.html

<IMG>

Een afbeelding invoegen

Attribuut	Resultaat
SRC="foto.gif"	de locatie en de naam van het afbeeldingbestand. Denk ook aan hoofd- en kleine letters en vermijd spaties in de naam
ALT="tekst"	alternatieve tekst die verschijnt als de afbeelding nog niet geladen is of niet geladen kan worden
WIDTH=n	breedte van de afbeelding in pixels
HEIGHT=n	hoogte van de afbeelding in pixels
LOWSRC="foto.gif"	lage-resolutie-versie van de afbeelding die bij een langzame verbinding wordt geladen vóór het bestand achter SRC
HSPACE=n	aantal beeldpunten dat vrijgelaten wordt tussen de afbeelding en de tekst (links en rechts)
VSPACE=n	aantal beeldpunten dat vrijgelaten wordt tussen de afbeelding en de tekst (onder en boven)
BORDER=n	breedte van het kader rond de afbeelding, 0 is geen kader
ALIGN=	left de afbeelding links, de tekst rechts right de afbeelding rechts, de tekst links Gebruik bij ALIGN=left en ALIGN=right <BR CLEAR=left> om tekst pas door te laten lopen als de linkerkantlijn vrij is, <BR CLEAR=right> voor de rechterkantlijn en <BR CLEAR=all> voor zowel de linker als de rechter kantlijn texttop bovenkant afbeelding gelijk met bovenkant tekst top bovenkant afbeelding gelijk met bovenkant hoogste element middle afbeelding centreren op onderkant tekst absmiddle afbeelding centreren op midden grootste element bottom onderkant afbeelding gelijk met onderkant tekst baseline onderkant afbeelding gelijk met onderkant tekst absbottom onderkant afbeelding gelijk met onderkant grootste element

Voorbeeld

*	<IMG SRC="foto.gif" ALT="Foto van mij" WIDTH=63 HEIGHT=129 LOWSRC="foto_low.gif" HSPACE=10 VSPACE=10 BORDER=0 ALIGN=left>

Tips

*	Als je van een afbeelding de breedte en hoogte opgeeft, kan de browser rekening houden met de ruimte die de afbeelding in gaat nemen en kan de rest van de pagina alvast op het scherm zetten, met als resultaat dat de pagina sneller zichtbaar is.
*	Voeg altijd een ALT="tekst" toe. Het kan altijd gebeuren dat een afbeelding niet geladen kan worden, bijvoorbeeld omdat de 'bezoeker' een verouderde browser gebruikt die een bepaald bestandsformaat niet ondersteunt. Vanaf Netscape 3.0 en Microsoft Internet Explorer 3.0 wordt deze tekst ook getoond als de afbeelding nog niet geladen is.
*	Tellers voor het aantal bezoekers worden ook vaak als afbeelding aangeroepen. Dit ziet er dan uit als <IMG SRC="/cgi-bin/count?width=6&link=gebruiker/index.html">. De preciese manier om dit te gebruiken verschilt per Internet-aanbieder.

<HR>

Een horizontale lijn invoegen.

Attribuut	Resultaat
SIZE=n	hoogte lijn in beeldpunten
WIDTH=n	lengte lijn in beeldpunten of percentage breedte van het document
ALIGN=left	de lijn links uitlijnen
ALIGN=right	de lijn rechts uitlijnen
ALIGN=center	de lijn centreren
NOSHADE	solide lijn zonder schaduw

Voorbeelden

*	<HR>
*	<HR ALIGN=right SIZE=10 WIDTH=300 NOSHADE>

Afbeeldingstypen

Op het Internet is het van belang dat je het goede afbeeldingstype kiest voor elk plaatje dat je laat zien op een pagina. Hieronder zijn de twee meest voorkomende typen besproken met hun voor en nadelen en waar je ze het best voor kan gebruiken:

Type	Kenmerken
.GIF	het Graphics Interchange Format is een compressie-standaard voor afbeeldingen die onder andere gebaseerd is op grote vlakken met dezelfde kleur en maximaal 256 kleuren. Dit type is dus zeer geschikt voor afbeeldingen met grote vlakken en weinig kleuren, zoals logo's.
.JPG	de Joint Photographic Experts Group heeft een compressie-standaard ontwikkeld voor foto's. Dit type is dus uitstekend te gebruiken voor afbeeldingen zonder regelmatige vlakken en met veel kleuren (standaard 16,7 miljoen). In tegenstelling tot het GIF-type is dit een compressiemethode waarbij informatie verloren gaat. Bij foto's is dit nauwelijks te zien, bij afbeeldingen met vlakken is dit echter vooral bij de randen juist zeer goed te zien, zeker bij een hoge compressie (die compressie-verhouding is in te stellen).

Tip

*	Kijk op de pagina over kleuren voor een tip over kleurgebruik.

JavaScript tip

In dit voorbeeld staat er een afbeelding op de pagina waar het volgende mee kan gebeuren:

*	als je er met de muis overheen gaat verandert de afbeelding
*	als je de muis er weer vanaf haalt verandert de afbeelding weer terug
*	als je op de afbeelding klikt wordt 'verder.html' geladen

Deze truuk werkt alleen met JavaScript 1.1 of hoger. Als de browser alleen maar JavaScript 1.0 ondersteunt, zal er een foutmelding volgen. Er moet dus een test ingebouwd worden.

<HTML><HEAD><TITLE>Titel</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
JavaScriptVersie='1.0';
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
JavaScriptVersie='1.1';
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--

if (JavaScriptVersie=='1.1') {
  Plaatje1 = new Image(200,100);
  Plaatje1.src = "plaatje1.gif";
  Plaatje2 = new Image(200,100);
  Plaatje2.src = "plaatje2.gif";
}

function LaatPlaatje1Zien() {
  if (JavaScriptVersie=='1.1') {
    document.Plaatje.src = Plaatje1.src;
  }
}

function LaatPlaatje2Zien() {
  if (JavaScriptVersie=='1.1') {
    document.Plaatje.src = Plaatje2.src;
  }
}

//-->
</SCRIPT>
</HEAD><BODY>

<A HREF="verder.html" onMouseOver="LaatPlaatje2Zien(); return true" onMouseOut="LaatPlaatje1Zien(); return true">
<IMG SRC="plaatje1.gif" NAME="Plaatje"></A>

</BODY></HTML>

In de JavaScript code wordt er eerst gekeken of de browser wel JavaScript 1.1 ondersteunt, en daarna worden de plaatjes plaatje1.gif en plaatje2.gif alvast geladen. Let er wel op dat de getallen in de regel Plaatje1 = new Image(200,100); de afmetingen zijn van het plaatje. In dit geval is het plaatje 200 punten breed en 100 punten hoog. Een voorbeeld van dit principe is te vinden op http://www.scheeres.nl/. Let er wel op dat je browser JavaScript 1.1 ondersteunt, anders zie je niets bewegen.

Laatste wijziging: 28-09-2002 - Copyright © 1996-2000 Bas Jansen (www.basjansen.com) - URL: http://html.op-het.net/printen/afbeeldingen.html