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