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 ...
ClockLink.com fournit le plus largement utilisé horloge Web dans
le monde avec plus de 23 millions de pages vues dans le monde. En outre, les horloges peut être configuré pour afficher n'importe quel fuseau horaire dans le monde, donc ils ne sont pas seulement
décoratifs mais très pratique aussi. Utilisez-le pour voir quelle heure il est dans votre région. Il n'ya pas de frais pour l'utilisation ou l'autre des horloges sur votre site ou votre blog.
Commentaires