CSS et opacité

J'ai procédé à quelques réaménagements sur le site.

Test : test

D'abord, j'ai découvert la fonction php urlencode(), qui permet de nettoyer les URL et de les formater proprement. Après l'avoir ajoutée au moteur de GuppY, je l'ai appliquée aux liens de la zone de téléchargement et du répertoire de signets ; j'ai ainsi rétabli la validation W3C de ces pages, que j'avais perdue à cause d'accents mal interprétés dans les URLs.

J'ai ensuite ajouté dans le pied de page des billets, des articles et des divers générateurs du site une icône permettant de bookmarker la page courante sur Del.icio.us, le service de publication et de partage de signets en ligne. J'en ai profité pour modifier les titres des billets, désormais cliquables.

Enfin, j'ai ajouté, dans la classe #footer de la CSS de l'actuelle skin, un effet d'opacité sur les icônes du pied de page. J'y ai associé un rollover en CSS, pour qu'au passage de la souris, l'opacité se dissipe et que l'icône survolée apparaisse clairement.

Voici le codelet CSS utilisé à cet effet :

#footer img {
filter : alpha(opacity=60);
-moz-opacity: 0.6;
}
#footer a:hover img {
filter : alpha(opacity=100);
-moz-opacity: 1.0;
}

Le premier code applique l'opacité sur toutes les images incluses dans la div #footer, tandis que le second applique une opacité nulle sur toutes ces mêmes images, survolées par le curseur.

Edit : IE ne reconnaissant pas l'attribut hover: appliqué à une image, l'effet de rollover n'est visible qu'avec FF. Edit (jeudi 6 avril) : grand merci à Alexandre, qui m'a proposé une solution habile, pour contourner le problème. J'ai actualisé le code CSS en conséquence.

Edit 2 : je viens de découvrir le superbe script smoothscroll.js de Kryogenix, qui permet de regagner le haut d'une page en la faisant doucement défiler, entre autres usages. J'ai donc installé le script sur le site : un clic sur la petite flèche, située en bas de chaque billet, permet de remonter la page.

Saute-Mouton - http://realia.free.fr/sautemouton_avril/newsprt.php?lng=fr&pg=2270 - [Version PDF]