print.gif

De meeste afbeeldingen die voor internet gebruikt worden, zijn in .gif, .jpg (.jpeg) of .bmp formaat. Hoewel plaatjes uw pagina kunnen verfraaien, moet u toch goed nadenken voor u ze opneemt, want als u er te veel gebruikt, wordt de laadtijd van de pagina veel te lang. Bezoekers kunnen uw site verlaten, omdat de pagina's te langzaam laden.

<img> tag en het attribuut "src"

Afbeeldingen neemt u op met de <img> tag. Die heeft geen eindtag.
U moet altijd het attribuut src (= source) erbij gebruiken, dit attribuut vertelt de browser waar de afbeelding staat. De waarde van src is daarom altijd een adres.

De attributen "height" en "width"

Er zijn nog twee attributen die u eigenlijk altijd moet toevoegen, namelijk height en width.

Deze attributen vertellen de browser welke afmetingen de afbeelding heeft. De browser laat deze ruimte open (in pixels) en gaat verder met het laden van de rest van de pagina. De afmetingen van de afbeeldingen moet u kunnen zien met uw grafische software.

Een voorbeeld van een "IMG" tag met de bijbehorende attributen:

<IMG src="car.gif" height="64" width="154">

Resultaat:

Plaatje

U ziet de afbeelding "car.gif" op het scherm verschijnen.

Afbeeldingen uitlijnen in een tabel

Als u tekst bij een bepaalde afbeelding wilt plaatsen, moet u het align attribuut gebruiken. Align kan als waarde top, bottom of middle hebben (bottom is de standaard, dus als u niets invult).

Hieronder ziet u voorbeelden van align met waarden: top en center.

 

car.gif

Dit is hetzelfde plaatje, maar nu ziet u dat de tekst aan de bovenkant van de afbeelding begint. Dit is dus de waarde top.

 

De complete tag met waarde "top" is:
<IMG src="car.gif" height="64" width="154" align="top">

U kunt bij een afbeelding de eerste regel van de naastliggende tekst ook ter hoogte van het midden van de afbeelding laten beginnen.

De complete tag met waarde "middle" is:

<IMG src="car.gif" height="64" width="154" align="middle">

Afbeelding als achtergrond

Om een afbeelding als achtergrond voor uw pagina te gebruiken moet u het attribuut background in de <BODY> plaatsen.
Zo dus:

<body background="afbeelding.gif">

Tekst tussen twee afbeeldingen

Het is mogelijk in een tabel links en rechts van de tekst een afbeelding te plaatsen. Gebruik daarvoor de volgende code:

<img scr=­"drieluik.png" width="108" height="97" border="0" align="left" alt=""/>
<img scr=­"drieluik.png" width="108" height="97" border="0" align="right" alt=""/>
<h4>Deze tekst staat tussen de afbeel­dingen</h4>

De clou is dat de ene afbeelding het attribuut align="left" krijgt en de andere het attribuut align="right". De afbeeldingen hoeven elkaar niet per se op te volgen. De truc is om de afbeelding vlak voor de tekst te zetten die ernaast moet komen te staan.

Tekst en afbeeldingen van elkaar scheiden

Een ingevoegde afbeelding beïnvloedt alle tekst die erop volgt, tenzij u een zogenoemde eindemarkering invoegt. Dat is een speciaal attribuut van de tag <br /> Het attribuut clear geeft aan dat de tekst pas vervolgd mag worden op het moment dat een bepaalde marge vrij is (de linker, rechter of beide marges). De code voor clear luidt:

<br clear="left" />
<br clear="right" />
<br clear="all" />

De tag komt vóór de tekst die pas vervolgd moet worden zodra de kantlijn vrij is.

Vergelijk de twee volgende voorbeelden.

Voorbeeld 1:

Tekst naast een ijsbeer

vogelpakkans.jpg

ijsbeer.jpg

 

In verschillende studies en na een aantal onderzoeken ter plaatse blijkt met name op de Noordpool de ijsmassa te slinken. Het gevolg is dat ijsberen steeds minder "vaste grond onder de voeten hebben" om met succes hun prooi, de zeehond, te verschalken. De oplossing? Men zoekt de oplossing in het drastisch verminderen van broeikasgassen zoals CO2. Andere wetenschappers zijn er van overtuigd dat de oplossing daar te vinden is. Zij wijzen op de verhoogde activiteit van de zon die het klimaat op aarde opwarmt. Zij wijzen erop dat perioden van verhoogde zonactiviteit in de afgelopen miljoenen jaren herhaaldelijk zijn voorgekomen. die activiteit zal ook weer een keer verminderen. Hoe zit het intussen met de ijsberen?

De gebruikte code om bovenstaande afbeeldingen naast elkaar te zetten is als volgt:

<img src=­"vogelpakkans.jpg" alt="eend" width="28%" height="295" align="left"/>
<img src="ijs­beer.jpg" alt="ijsbeer" width="28%" height="295" align="left"/>

Voorbeeld 2:

Dieren krijgen de ruimte

vogelpakkans.jpg

ijsbeer.jpg


In verschillende studies en na een aantal onderzoeken ter plaatse blijkt met name op de Noordpool de ijsmassa te slinken. Het gevolg is dat ijsberen steeds minder "vaste grond onder de voeten hebben" om met succes hun prooi, de zeehond, te verschalken. Men zoekt de oplossing in het drastisch verminderen van broeikasgassen zoals CO2. Andere wetenschappers zijn er van overtuigd dat de oplossing daar niet te vinden is. Zij wijzen op de verhoogde activiteit van de zon die het klimaat op aarde opwarmt. Zij wijzen erop dat perioden van verhoogde zonactiviteit in de afgelopen miljoenen jaren herhaaldelijk zijn voorgekomen. Die activiteit zal ook weer een keer verminderen.

Het resultaat van de code <b clear="right" is voor bovenstaand voorbeeld  ingrijpend. De tekst gaat pas verder, zodra de rechtermarge (voorbij de foto van de ijsbeer) vrij is. In dit geval zou de code <b clear= "all" hezelfde resultaat hebben.

De bijbehorende code van voorbeeld 2 is:

<img src=­"vogelpakkans.jpg" alt="eend" width="28%" height="295" align="left"/>
<img src=­"ijsbeer.jpg" alt="ijsbeer" width="28%" height="295"/>

<b clear="right"/>

Grote foto's op een webpagina

Het tonen van grote foto's in hoge resolutie op een website levert vaak problemen op. Het zorgt meestal voor een onoverzichtelijke pagina die bovendien een paar megabyte groot is. Het is vaak beter en mooier om van bepaalde foto's een vergroting aan te bieden in een apart venster. Er staat dan een kleine afbeelding op de pagina (thumbnail), door op die afbeelding te klikken komt de foto tevoorschijn in een popup of op een aparte pagina. De kleine versie geeft bezoekers een goed idee van de foto. Als die meer details willen zien, dan klikken ze op de thumbnail en zien dan een grotere versie van de foto.

Het tonen van de grote foto door op de thumbnail te klikken, kan als volgt:

<a href=­"fotonaam.jpg" ><img src=­"foto-thumbnail.jpg" width="150" height="100" alt="" /></a>

Dat werkt goed. Maar er is een nadeel. De bezoeker wordt naar een nieuwe pagina geleid. Daar is echter een oplossing voor. Je kunt een grote versie van een foto tonen zonder dat de bezoeker de pagina verlaat. Daarvoor gebruik je een paar JavaScripts die op het web bekend staan als Lightbox, Shadowbox of FancyBox.

Lightbox, Shadowbox, FancyBox of Slimbox

Lightbox

Eén manier om foto's te tonen binnen de pagina waar een bezoeker zich bevindt, is met behulp van Lightbox dat te krijgen is op lokeshdhakar.com. De bezoeker ziet een kleine versie van de foto op een pagina. Als hij daarop klikt, legt Lightbox een laag over de webpagina - een zogenaamde ‘overlay’ – en maakt daarin een vak dat zich automatisch aanpast aan de afmetingen van de foto. Die overlay is geen popup, want daaronder wordt over het algemeen een nieuw browservenster verstaan. Popups worden vaak voor reclames gebruikt, vandaar dat veel mensen popupblockers installeren zodat ze de reclame niet te zien krijgen. Een gevolg is wel, dat fotoalbums die popups gebruiken niet goed werken.

aardwarmte.jpgEen voorbeeld van een overlay gemaakt met Lightbox zie je hieronder, klik op de thumbnail aardwarmte.png om te zien wat er gebeurt.

Met Lightbox, Shadowbox en Fancybox kun je ook foto's groeperen. Dat houdt in dat je binnen het geopende popup-venster met de geplaatste pijlen door alle foto's kunt bladeren. Ook is het mogelijk een onderschrift toe te voegen.

Voorbeelden van zo'n groep gemaakt met Lightbox vind je hieronder. Klik op de eerste foto van de groep Kruiden of Frankrijk en ga daarna met je muis naar rechts over de foto. Er verschijnt dan een pijlpunt in beeld om verder te bladeren.

 

Kruiden

Voorbeeld Lightbox groep Kruiden Voorbeeld Lightbox groep Kruiden Voorbeeld Lightbox groep Kruiden Voorbeeld Lightbox groep Kruiden

 

Frankrijk

Voorbeeld Lightbox groep Frankrijk Voorbeeld Lightbox groep Frankrijk

 

Shadowbox

De volgende twee groepen foto's zijn gemaakt met Shadowbox. De pijl om naar een andere foto te gaan vindt u rechts onder in het venster.

Voorbeeld Shadowbox groep apart Voorbeeld Shadowbox groep apart Voorbeeld Shadowbox groep apart

 

Voorbeeld Shadowbox groep Voorbeeld Shadowbox groep Voorbeeld Shadowbox groep Voorbeeld Shadowbox groep

 

FancyBox

Ook FancyBox is een instrument om afbeeldingen op het scherm te zetten. Op de site waar u dit instrument kunt downloaden, staat ook een gebruiks­aanwijzing (Engels). Fancybox doet hetzelfde als Lightbox en Shadowbox. Ook Fancybox maakt een zogenaamde ‘overlay’, een soort laagje over de pagina.

Eenvoudige fotogalerij

Verschillende vensterinhoud weergeven

Ook andere inhoud van websites en multimedia kun je met FancyBox in een venster plaatsen dat op de webpagina drijft.

Bladeren met knoppen

Bladeren met de Thumbnails

Media in de webpagina

De volgende opties werken niet vanaf je eigen computer, alleen vanaf een server.

Open foto's met tekstkoppelingen

Bladeren door een groep
example1 example2 example3 example4

Bladeren door een fotoalbum

 

 

Slimbox 2

Ook Slimbox 2 is een script waarmee afbeeldingen kunnen worden getoond / vergroot in een fancy overlay blok. Dankzij deze techniek kunnen bezoekers eenvoudig afbeeldingen vergroten en hier doorheen navigeren. Ontwikkelaar Christophe Beyls uit België heeft Slimbox 2 gebaseerd op het bekende Lightbox script van Lokesh Dhakar uit Baltimore.

YouTube-video op je website

Daarvoor gebruik je de tag <object>.....</object>. De eigenlijke code komt tussen deze twee tags te staan. Met het opnemen van een object op een webpagina kun je ook een andere pagina van het internet tonen binnen je eigen pagina. Een ander voordeel is dat de oorspronkelijke pagina niet 'verlaten' wordt (en ook niet hoeft te worden herladen) als je binnen de object pagina aan het klikken bent.

Zoek eerst de betreffende video op youtube.com. Klik op de link "Delen" die onder de video wordt weergegeven. Het gedeelte onder de video klapt nu een stukje uit en laat onder andere een link naar het filmpje zien. Je wilt geen link op je site plaatsen, maar het filmpje echt binnen je eigen site laten zien. Klik daarvoor op de link "Embed" ("Insluiten"). Zie figuur hieronder.

Insluitcode en opties YouTube-video

Het gedeelte onder de video is nu nog een stukje verder uitgeklapt, je ziet een stukje code en een aantal opties.

Embed: (Iinsluitcode:)
Dit is de code die je moet kopiëren en in je website plakken. Iets verderop vind je de uitleg hoe je dat precies doet.

Video size: (Grootte)
Hier kun je bepalen hoe groot je de video wilt weergeven. Het eerste formaat is over het algemeen een formaat dat prima in een webpagina past. Je kunt ook zelf een formaat invoeren

Video opties:
Hier kun je verschillende weergavevoorkeuren aangeven. De opties spreken voor zichzelf of je kunt op de vraagtekentjes achter de opties klikken voor een nadere uitleg. De optie Show suggested videos when the video finishes (Voorgestelde video's weergeven wanneer de video is afgelopen) zul je waarschijnlijk willen uitvinken. Hiermee worden namelijk na afloop van het filmpje nog andere (gerelateerde) filmpjes getoond.

Als je bij Video size of de opties aanpassingen doet, zie je ook de code veranderen. Stel dus eerst je voorkeuren in voordat je de insluitcode kopieert.

De insluitcode (en daarmee de video) in je website zetten:

- Zorg dat je de insluitcode hebt gekopieerd.
- Ga naar de webpagina waar je de video wilt plaatsen.
- Wil je de video tussen alinea's plaatsen? Zorg dan dat er alvast wat witregels staan zodat je de video er makkelijk tussen kunt zetten.
- Open het broncode venster van de pagina.
- Zet je cursor op de plek waar je de video wilt plaatsen en plak de insluitcode.
- Sluit en bewaar ("Save" het broncode venster. De video staat nu in de editor.
- Kopieer de pagina naar de host zodat de video ook wordt weergegeven op je website.

De code van een object kan er (bijvoorbeeld) zo uitzien:

<object data="http://home.kpn.nl/­aart0056/" class="external free" title="klimaat" width="90%" height="300" border="1"></object>

Wat u te zien krijgt, is een blik op een website over het klimaat.

Tips

Je kunt een aantal elementen aan het object toevoegen. Hier volgen er een aantal.
Height
Bepaalt de hoogte van het object. Kun je ook op auto zetten.
Name
Met dit element kun je het object een unieke naam geven, waarmee een link naar het object kan verwijzen. In je link zet je dan <a href="pagina.htm" target="object1"> Hierbij is pagina.htm de webpagina en object1 de naam van het object. Op die manier zorg je ervoor dat de link in het object verschijnt.
Scrolling
Dit attribuut kun je ook de waarde yes, no of auto geven. Daarmee bepaal je of (als de pagina te groot wordt) je scrollbalken (automatisch) krijgt of niet.
data
Hiermee bepaal je de bron voor het object. De pagina die in het object verschijnt.
Width
Bepaalt de breedte van het object. Kan in pixels of in procenten.