Je mets actuellement un script en test, le résultat est visible dans les albums photos:

Cette petite barre permet d'agrandir/réduire la taille de la photo d'un album.
Si ça intéresse certains, je rendrai le script disponible dans un prochain article.

J'ai un petit problème d'administration de mon blog qui m'empêche de renouveler mon nom de domaine. Du coup, le blog rique de ne plus être accessible par www.francisek.com mais il demeurera consultable par http://francisek.over-blog.com
J'espère que les admins trouveront rapidement une solution à mon problème.
[Edit 07/08/06]
La situation est débloquée, rien ne changera, ce sera francisek.com. Merci les admins!
[/Edit]

Vous connaissez certainement l'effet de rollover qui consiste à subsituter une image de fond survolée par la souris avec une autre image. Cet effet permet d'ajouter de l'interacivité à votre site, et est très souvent utilisé pour animer des boutons.
Plusieurs techniques permettent d'obtenir cet effet, du simple code HTML (non conforme XHTML) à l'utilisation du javascript.
Ces méthodes traditionnelles présentent cependant des désavantages:

• avec de petites connections (modem par exemple), l'image de substitution peut ne pas être chargée à temps. Le palliatif traditionnel est de précharger l'image par javascript ou HTML (dans un élément invisible), ce qui a pour effet de multiplier les transactions avec le serveur d'images.
• si vous changez ou déplacez une image, vous devrez penser à aussi modifier la deuxième image.
• lorsque le javascript est désactivé, il n'y a plus de rollover.

Saviez-vous que par une petite astuce, on peut obtenir le même effet en CSS et ce avec une seule image? Ainsi vous réduirez la charge des serveurs et faciliterez la maintenance de votre site en ne modifiant plus qu'une seule image.
L'astuce est simple. Prenons le cas d'une image-bouton de 100x100px qui changera de couleur lorsqu'elle sera survolée par la souris. Traditionnellement, nous écririons le code HTML suivant pour afficher l'image dans un lien:



Le CSS nous permettant d'appliquer une image en fond d'un élément, nous pouvons aussi écrire ce code équivalent:


et encore mieux, en séparant le fond de la forme:

pour le HTML et

pour le CSS.

Tout cela est bien beau, mais nous n'avons pour le moment qu'une image qui ne fait pas de rollover. Nous y venons...
Si l'on considère que le CSS permet à la fois de positionner une image de fond, de masquer une partie du contenu et d'agir au passage de la souris sur un lien, nous concluons qu'il suffit de fusionner les deux images du bouton en une seule, l'une au dessus de l'autre par exemple, et d'utiliser à bon escient ces fonctionnalités pour obtenir notre effet de rollover.
Deux images de 100x100 deviennent ainsi une seule image de 100x200:

Il ne reste plus qu'à modifier le CSS pour le bouton en postionnant l'image de fond et masquant le dépassement: