CSS et portes coulissantes pour un effet de zoom :hover

Réaliser un effet de zoom sur une image nécessite généralement deux versions d’un même visuel : la première à 100%, et la deuxième à taille réduite. Les événements onmouseover et onmouseout pilotent traditionnellement le changement de source de l’image pour gérer la permutation.

Image survolée avec deux images

En Javascript

 <img src="img1.gif" border="0" width="30" height="20" onmouseover="this.src='img2.gif'" onmouseout="this.src="img1.gif">

En CSS

Une deuxième solution consiste à utiliser CSS pour piloter cette permutation à l’aide de la pseudo-classe :hover appliquée une ancre de préférence pour pallier les insuffisances d’Internet Explorer en matière de rendu CSS. On obtient quelque chose comme :

a.img1, a.img2 {
    display: block;
    width: 30px;
    height: 20px;
}
a.img1 { background: url(img1Out.gif) no-repeat; }
a.img1:hover { background: url(img1Over.gif) no-repeat; }

Dans la page, nous aurions ceci : <a class="img1" title="Description de mon image"></a>

Ce lien vide peut gêner. Pour en faire un plat utile, je vous propose d’utiliser une technique inspirée de Fahrner Image Replacement (FIR). Il s’agit simplement d’indenter le texte pour le faire disparaitre de la fenêtre du navigateur :

a.img1, a.img2 {
    text-indent: -9999;
}

<a class="img1" title="Description de mon image">Texte du lien</a>

Ainsi, pas de lien vide et un peu de grain à moudre pour les moteurs de recherche 😉

Preload des images avec Javascript

Ces deux premiers exemples simples à mettre en œuvre souffrent d’un léger défaut : les images destinées au survol de la souris mettent parfois du temps pour apparaitre. Pour régler ce problème, il suffit de déclarer vos images via Javascript pour les charger dans le cache du navigateur :

 <script type="text/javascript">
<!--
    img1         = new Image(30,20)
    img1.src    = "img1.gif"
    img2         = new Image(30,20)
    img2.src    = "img2.gif"
 //-->
</script>

Avec CSS et une seule image

Voyons maintenant comment faire avec une seule image et quelques déclarations dans une feuille de style CSS pour obtenir le même résultat.

J’ai repris le principe qui consiste à utiliser une image contenant les deux états d’un visuel. On l’utilise souvent pour faire les états on/off d’un bouton. Ici, la vignette réduite laissera la place à l’image agrandie au passage de la souris.

Précisez ensuite pour l’état :hover la position adéquate : top left ou bottom right selon la construction de l’image.

.foot a {
    background: url(pix/foot_boy.jpg) no-repeat top left;
}
.foot a:hover {
    background: url(pix/foot_boy.jpg) no-repeat bottom right;
}

Des défauts ?

Cette technique nécessite de nombreuses manipulations sous Photoshop pour préparer les images (comptez 30 secondes par image env.), mais Benoît me souffle dans l’oreillette qu’avec la librairie php GD on peut automatiser la procédure…

La démo !

Comme toujours, j’ai privilégié la démo au détriment du blabla. Affichez-donc la source de effet de zoom en css pour en savoir plus 😉

Vous trouverez des explications complémentaires concernant Javascript sur le site aidejavascript.

Télécharger le fichier .html ou .php et les images

Linkographie. Portes coulissantes :

D’autres applications pour les portes coulissantes

http://pompage.net/pompe/portescoulissantes/

Excellente traduction d’un article de Douglas Bowman par Samuel Latchman sur la technique des portes coulissantes appliquées à la navigation par onglets

http://www.ultra-fluide.com/ressources/css/menu-onglets.htm

Si vous préférez une autre approche du même article, voici la traduction de Xavier Boully

http://www.alistapart.com/articles/slidingdoors/

Et pour quelques octets de plus, voici l’original !