Gadget : Zoom Image avec CSS et HTML.

Publié le par lolond

Un de notre lecteur nous demande de trouver un astuce : faire zoom sur les images dans les articles d'over-blog. Voici ce que nous avons trouvé comme méthode sur le Web :
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>

<a href="#"><img src="image.jpg" width="200" height="144" alt=""></a>
...
</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 ...

Publié dans WIDGET-GADGET(S)

Commenter cet article