 |
|
 |
 |

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


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


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


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



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.

|