J'ai déjà décrit une utilisation de la pseudo-classe:hover dans cet article afin de simuler un effet de zoom au survol d'une image.
La pseudo-classe :hover étant originellement destinée à un lien textuel, son détournement au profit d'une image n'est pas sans poser quelques problèmes (clignotements, notamment) si on cherche à extraloper à une autre utilisation. J'avais d'ailleurs mentionné cet avertissement dqans l'article sus-cité.
Je cherchais d'autres méthodes depuis un bon moment, sans succès.
Mais, à l'occasion de l'étude de ce menu Apple, j'ai imaginé la possibilité d'utiliser cette technique de rollOver en d'autres situations. Car en effet, que ce soit via JavaScript ou CSS, les effets de rollOver utilisent tous 2 images (correspondant aux deux états). L'inconvénient, entre autres, est que la deuxième image n'étant pas chargée, l'effet peut subir un temps de latence variable selon le poids de l'image. Pour pallier cet inconvénient, on peut, certes, inscrire un script de préchargement dans le head, mais cela alourdit encore le code.
L'effet de rollOver que je vous propose ici est intéressant car il n'utilise qu'une seule et même image, dans laquelle les deux états sont présents. S'il s'agit d'un effet de zoom, l'image contient les deux états. Il va de soi que l'on peut aisément utiliser cette même technique juste pour le remplacement d'une image par une autre de même dimension que la première (voir le lien en bas d'article).
C'est pas bea...
