CSS et portes coulissantes pour un effet de zoom :hover

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

CSS et portes coulissantes pour un effet de zoom :hover

zoom.jpg 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.

Exemple d'image en porte coulissantes

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

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 !

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



7 commentaires pour “CSS et portes coulissantes pour un effet de zoom :hover”

  1. Cap° dit :

    Cela me pose un peu un problème. C’est la création des deux états de l’image. Je suis plus partie prenante pour redimensionner une même image. Le fait d’avoir aussi un code CSS qui soit unique par image, ne pourrait on pas avoir un code générique pour toutes les images se trouvant sur la page !!!!

  2. br1o dit :

    Bonsoir Cap°, Moi qui pensait avoir relativement bien factorisé mes css… Je ferais mieux la prochaine fois ;)

  3. Cap° dit :

    Nop le système est très bon, mais vu que je suis une vrai couleuvre !!! Moins j’en fait et mieux je me porte. Donc avec un code CSS unique pouvant servir pour toutes les images, plus l’utilisation d’une image pour les deux états et bien se serait très intéressant pour les buzes dans mon genre :P !!!!

  4. indicadesbois dit :

    Pas mal cette coulisse et jolie photo ;) Vas falloir qu’on bosse sur un script php qui te la génére via GD à partir d’un seulle photo. Je met ça de coté dans tête.

  5. gyo dit :

    pour précharger les images, on peut avoir recours à un système en pure html/css, de cette manière :

    • le html (à mettre en début de code) : <div id="preload"> <img src="/url/img1.png" /> <img src="/url/img2.png" /> … <img src="/url/imgn.png" /> </div>

    • le css :

      preload {

      display: none; }

      le div #preload ne sera jamais afficher, mais le navigateur ira tout de même charger les images

      mes 2 centimes d’€

  6. br1o dit :

    Salut, Effectivement, c’est une bonne solution, qui évite le préload des images en javascript. La technique évoquée est surtout utilisée dans les effets d’images survolées (rollover). Je trouve que c’est assez pratique de mettre les deux états d’une image dans le même fichier. Dans ce billet sur l’effet de zoom, je voulais montrer une autre façon de l’utiliser. Il doit y en avoir d’autre ;)

  7. Freak0 dit :

    J’ai une autre solution de tête vite fait je vais voir si je peux appronfondir ça dans les jours à venirs.



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site