NoShade.net est en vente — Contactez nous si vous êtes intéressé
Le siteTutoriauxInterviews
icone RSS NoShade.net

Accueil » Tutoriaux » Css » Zoom sur images!

Zoom sur images!


Bonjour! ;)
Dans ce tutoriel, nous allons apprendre à réaliser un effet qui va certainement servir pour votre site: le zoom d'image et ceci totalement en CSS!
Voici ce que nous allons réaliser ensemble : cliquez ici!



La première étape de ce tutorial va consister à insérer une balise lien. On la transformera ensuite en un bloc pour faire apparaître l'image. Il faut donc lui donner une "classe" pour que le CSS s'y retrouve. Nous allons donc obtenir quelque chose de ce genre :

<a href="#" title="Zoom image - Noshade" class="zoom"></a>


La seconde partie ne traitera que du CSS. Ne vous occupez plus de votre code HTML, il est très bien comme ça! :P
Le principe est à quelque chose près le même que pour le tutorial sur le rollover. Si vous l'avez déjà lu, vous aurez donc quelques facilités.

Je vais choisir une image que j'ai crée pour l'exemple :



Je vais la placer dans ma balise lien (de type block), en fond. Les dimensions de la balise de lien sont celles de la petite image (celle qui sera agrandie au survol). Si vous ne les connaissez pas, ouvrez Paint (oui ça marche avec ce logiciel :D) et sélectionnez la petite image. Lisez alors les dimensions de la sélection en bas à droite de l'écran pour les inclure dans votre code CSS.
Voici ce que vous devriez avoir :

a.zoom { /* Les liens qui ont la classe "zoom" */
  display: block;
  /* On fixe les dimensions de la petite image */
  width: 178px;
  height: 160px;
  background-image: url( "01.png" ); /* On met l'image en fond */
}

a.zoom:hover { /* Au survol d'une image ayant la classe "zoom" */
  width: 400px;
  height: 238px;
  /* On modifie la position de l'image de fond pour qu'elle laisse apparaître l'image zoomée */
  background-position: 0% -161px;
}


Qu'est-ce qui change au survol?
Et bien on a modifié les dimensions du bloc qui sont alors réglées aux dimensions totales de l'image de départ. Le zoom est en fait un déplacement vertical de notre image de base

En effet, on ne veut voir que celle qui est agrandie alors on va "pousser" la petite dans le bloc afin de la masquer. C'est peut-être un peu brut mais c'est tout à fait correct!

à noter que ceci marche sous tous les navigateurs web, même... Internet Explorer!

Voilà, c'est tout, à bientôt pour un nouveau tutoriel!
Le 18/05/2006 par Vinchz

Partager ce tutoriel : icone Scoopeo icone del.icio.us icone Digg icone Facebook icone Technorati icone TwitThis icone Google icone Live icone MySpace icone Wikio icone Mixx icone Reddit icone NewsVine

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

Merlin a écrit :

Excellent !!! simple et efficace...
Enfin, pas testé, mais je suis sûr que ça fonctionne ;o)

Merlin a écrit :

Re, aurait tu une technique pour repérer facilement les coordonnées de l'affichage du zoom ?
Ou faut-il y allait par tâtonnement ?

En fait je souhaiterait réaliser une sorte de pop-up qui permettrait de pouvoir utiliser le zoom comme un commentaire sur le lien...

Je ne sais pas si je suis clair mais bon...

Merci en tout cas !

@+ Merlin

Legibe a écrit :

Merlin : souvent il faut y aller par tâtonnements oui...
parfois il y a des "ruses" qui permettent de faciliter le fait de repérer un bloc, par exemple lui appliquer un bord de 1 pixel rouge, ce genre de choses... où bien des techniques par exemple si tu affiches la moitié d'une image, hé bien il faut diviser par deux sa largeur,c 'est mathématique/logique quoi :)

Ajouter un commentaire sur ce tutoriel

CSS, Zoom, Images, Survol, hover, Effet
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)