Petite explication à propos du menu rollover contenant le sommaire.
Quand j’ai cherché à mettre un menu dynamique sur mon site, je n’ai pas réussi à en trouver un qui me convienne vraiment. Je voulais un menu qui respecte les contraintes suivantes :
Le code HTML nécessaire à l’intégration du menu dans une page web doit être le plus simple et le plus élégant possible. (eh oui, la programmation est un art, l’élégance du code a son importance !! ^_^ )
Le code doit respecter les standards du WEB. Afin d’être compatible avec les navigateurs standards. Pour la même raison, je ne voulais utiliser aucun javascript, seulement du CSS.
L’image doit être la plus simple possible, pour pouvoir en changer facilement. Il était donc hors de question de découper l’image en plusieurs morceaux, par exemple.
toutes les images doivent être préchargées, afin d’éviter un effet de clignotement.
Le code HTML
Voilà ! Je pense qu’on peut difficilement faire plus simple, non ?
L’image
- la seule image utilisée
Pour raison de simplicité, je n’utilise qu’une seule image contenant les états de tous les ’boutons’. Cela simplifie grandement la création d’une nouvelle image.
Là encore, je pouvais difficilement faire plus simple. Sauf peut-être en n’utilisant que l’image non éclaircie et en lui ajoutant un alpha quand la souris passe dessus. Mais la gestion de l’alpha dans les CSS n’est pas encore assez répandue. 
Le code CSS
Bon, c’est là que se trouve tout le code un peu complexe. Complexe car il nécessite quelques calculs à faire au pixel près pour que l’image ne soit pas trop moche.
Commençons d’abord par la partie générique du code. Elle contient tout ce qui concerne les styles à appliquer au texte.
Partie spécifique à l’image :
Changer d’image
Après quelques jours à voir toujours la même image sur votre site, il vous prend l’envie d’en changer ? Rien de plus simple !
Il suffit de recopier la partie spécifique à l’image utilisée. C’est-à-dire la classe ’.sakura’. Et de changer les paramètres correspondant au nom de l’image et à sa taille.
Donnez un autre nom à cette classe, comme ça, vous pourrez passer de l’une à l’autre en un clin d’oeil ! Vous pouvez même imaginer sur un site dynamique un menu qui choisisse l’image de fond au hasard ...
Au final
Le gros avantage (qui est aussi le plus gros inconvénient) de cette technique est de déplacer toute la logique métier dans la feuille de style.
RSS 2.0