Gadget : Zoom Image avec CSS et HTML.
1. Théoriquement, pour daire un zoom image en CSS & HTML, nous devons :
(extrait de batraciens.net)
Code source CSS :
<html>
<head>
/* agrandi les images lors du survol */
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a img {border:none} /* pas d'encadrement des images */
a:hover {border:0px } /* hack pour IE - ne sert sinon à rien */
a:hover img {width:300px ; height:216px} /* agrandi les images lors du survol */
</style>
</head>
<body>
...
</body>
</html>
Explication :
Cet effet simple permet de zommer une image. Les liens <a href="#"> ne servent normalement à rien (sauf si on veut rendre cliquable l'image zoomée). Simplement, Internet Explorer 5.x et 6.0 ne savent pas interpréter les pseudo-class :hover en-dehors d'un lien <a>.
Dans l'exemple ci-contre, c'est le lien hors survol qui a été défini sans taille CSS. L'image s'affiche alors dans la taille définie dans le code HTML.
On change ensuite la taille en redéfinissant celle-ci dans le a:hover (les tailles CSS l'emportent sur les tailles HTML).
On pourrait faire l'inverse : rétrécir l'image dans le lien hors survol, et la laisser revenir à la normal dans le a:hover.
Pour que le zoom ne pixélise pas, il faut une image de bonne qualité (ce qui n'est pas le cas ici), éventuellement réduite dans le lien hors survol.
Pour appliquer à notre blog :
** En mode administrateur cliquez sur "Design>>CSS", puis collez la séquence de code CSS à la fin des codes CSS dans le texte du volet "Mon style" :
/* agrandi les images lors du survol */
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
a img {border:none} /* pas d'encadrement des images */
a:hover {border:0px } /* hack pour IE - ne sert sinon à rien */
a:hover img {width:300px ; height:216px} /* agrandi les images lors du survol */
</style>
N'oubliez pas de cocher sur la case "Appliquer ma feuille de style personnalisée" :
** Appuyez sur le bouton "Enregistrez".
Quand, vous publiez un article avec l'image que vous souhaitez de faire zoom. Passez en mode 'Edition avancée".
** Introduisez l'image et cliquez sur la commande "HTML"
Répérez le code HTML de l'image, ici :
<img style="float: right;" id="mainImage" src="http://pic80.picturetrail.com/VOL1908/12710575/22609958/376539337.jpg" height="117" width="114" />
** Et le remplacez par la séquence :
<a href="#"><img style="float: right;" id="mainImage" src="http://pic80.picturetrail.com/VOL1908/12710575/22609958/376539337.jpg" height="117" width="114" alt=""/></a>
Mettez votre souris sur la petite image à droite pour voir l'effet!
Voir aussi :
√ ClockLink : Horloge pour Site/Blog
√ Module Paypal pour over-blog type "Confiance".
√ Effet mirroir pour vos photos et vos textes.
√ Dailymotion : Créer un mur vidéo (videowall)
√ Créez vos diaporamas de photos avec Comboost (dès le mode confiance).
etc ...