HTML op het net Inhoud - Downloaden - Printen - Zoeken Afbeeldingen
Algemeen

Afbeeldingen
  <IMG>
  <HR>
  Afbeeldingstypen
  JavaScript tip

Animaties

Formulieren

Frames

Java

Kleuren

Lijsten

Links

Maps

Shtml

Style sheets

Symbolen

Tabellen

Teksten


HTML op het net
  Inhoud
  Downloaden
  Uitprinten
  Zoeken

Gastenboek

Nieuws

Info


<IMG> Top

Een afbeelding invoegen

AttribuutResultaat
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=nbreedte van de afbeelding in pixels
HEIGHT=nhoogte 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=naantal beeldpunten dat vrijgelaten wordt tussen de afbeelding en de tekst (links en rechts)
VSPACE=naantal beeldpunten dat vrijgelaten wordt tussen de afbeelding en de tekst (onder en boven)
BORDER=nbreedte van het kader rond de afbeelding, 0 is geen kader
ALIGN=
leftde afbeelding links, de tekst rechts
rightde 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
texttopbovenkant afbeelding gelijk met bovenkant tekst
topbovenkant afbeelding gelijk met bovenkant hoogste element
middleafbeelding centreren op onderkant tekst
absmiddleafbeelding centreren op midden grootste element
bottomonderkant afbeelding gelijk met onderkant tekst
baselineonderkant afbeelding gelijk met onderkant tekst
absbottomonderkant 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> Top

Een horizontale lijn invoegen.

AttribuutResultaat
SIZE=nhoogte lijn in beeldpunten
WIDTH=nlengte lijn in beeldpunten of percentage breedte van het document
ALIGN=leftde lijn links uitlijnen
ALIGN=rightde lijn rechts uitlijnen
ALIGN=centerde lijn centreren
NOSHADEsolide lijn zonder schaduw

Voorbeelden

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

Afbeeldingstypen Top

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
.GIFhet 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.
.JPGde 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 Top

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-2002 Bas Jansen - URL: http://html.op-het.net/tekst/afbeeldingen.html Top