Archief - Q: Thumbnails faden en oplichten

Ik zou op mijn mediapagine graag het volgende effect krijgen:

-Alle thumbnails zijn zwart-wit
-Als je erover gaat lichten ze in 2-3 seconden op naar de volle kleuren versie

Ik heb dit al bij andere sites gezien, maar ik vraag me af of het te bereiken is met javascript/css? Het is niet de bedoeling het in flash te maken.

Dank bij voorbaat.

Is nog vrij simpel zelfs...

Benodigdheden:
* je grijze afbeelding
* een animated gif (single loop!) met het oplichten, laatste frame is je definitieve afbeelding
* onmouseover / onmouseout

Werkend voorbeeld

Valt nog verder te verfraaien met bvb het preloaden van de animated gifjes, en eventueel een gelijkaardig onmouseout-effect...

Hier staat een voorbeeld die in verschillende browsers werkt, en die met JavaScript/CSS werkt:
http://clagnut.com/sandbox/imagefades/

Zelf toepassen op thumbnails zal wel nie zo moeilijk zijn, en de de switch van zwart-wit naar gekleurde foto kan door via JavaScript de src van de afbeelding te veranderen denk ik. Bekijk het eens.

ps:
zoek verder wat op google met relevante trefwoorden zoals: fading, image, cross, browser, clagnut (want is bekend), script, ...

Zo heb ik het ook gevonden en je krijgt veel meer uitleg.

@JeY
Dat is niet meteen het meest handige voorbeeld hé. Dan moet je van iedere thumbnail ook een animated version (laadtijden) hebben. Mits enige aanpassing denk ik dat met het voorbeeld van clagnut je er wel kan komen.

DarkBone zei:

Hier staat een voorbeeld die in verschillende browsers werkt, en die met JavaScript/CSS werkt

Klik om te vergroten...

Fijn... Het beloofde "faden" werkt alvast niet onder Opera...

JEy zei:

Fijn... Het beloofde "faden" werkt alvast niet onder Opera...

Klik om te vergroten...

Ik zeg toch ook niet 'alle browsers', trouwens, ik heb het script ook maar net gevonden ervoor was mij zo'n script die cross-browser werkt sowieso al niet bekend, en ik stel dan ook voor van nog even verder te zoeken, maar... het faden werkt wel in: IE/Win, Safari, Konqueror, Mozilla and Firefox.

Ik denk dat het een afweging zal worden tussen wat het gemakkelijkst is voor hem en wat in de meeste browsers werkt.

*Edit*
Genoeg voorbeelden, je bekijkt maar wat waar werkt:
http://www.brainerror.net/scripts_js_blendtrans.php
http://www.javascript-fx.com/fade_rollovers/general_help/help.html (wel geen xhtml)
http://www.couloir.org/js_slideshow/ (zéér mooi voorbeeld van slideshow zonder flash)
'clagnut + fading' levert je nog wel variaties op

het faden werkt er niet in omdat opera geen opacity ondersteunt
maar wel in netscape