Home Ontwerp je site HTML DHTML - Aangeklikte afbeelding zwart-wit

DHTML - Aangeklikte afbeelding zwart-wit

Dikwijls worden thumbnails gebruikt om te linken naar een afbeelding met grotere afmetingen of om naar een andere site te linken. Thumbnails zijn dus kleine fotootjes.
Een reeds bezochte hyperlink verandert van kleur en zo kun je zien welke hyperlink je al hebt aangeklikt en welke niet. Bij afbeeldingen kun je dit normaal gezien niet zien.

In dit artikel leer je hoe je ervoor kan zorgen dat een aangeklikte afbeelding in zwart-wit verandert. Enige voorwaarde is natuurlijk dat je afbeelding oorspronkelijk in kleur is.

De stijlregels

Eerst en vooral zorg je ervoor dat je tussen je <head> en </head> deze code plaatst:

<style type="text/css">
a:link {color: #000000; }
a:visited {color: #000000; }
a:hover { color: #0000CC; }
.visited { FILTER: Gray; }
</style>
Vooral van belang hierbij is de laatste regel, die een filter toepast op de afbeelding en ervoor zal zorgen dat de afbeelding in zwart-wit wordt omgetoverd.

Filter toepassen

Bij de afbeelding zelf zorg je ervoor dat de HTML-code er zo uitziet:

<a href="http://www.hetmooisteopaardebenjij.be/" >
<img src="foto_Ilse.jpg"" border="1" width="120" height="100"onmousedown=onmousedown="className='visited'>
border="1" width="120" height="100" /> </a>
Belangrijk is nog even om op te merken dat dit enkel werkt in Internet Explorer. In Firefox zal de rand veranderen van kleur, maar zal de afbeelding niet in zwart-wit veranderen.

9 + 6 =
 

GOOGLE adsense