Agrandir une photo d'un clic de souris

Une astuce toute simple et très pratique pour mettre en ligne des photos de grande taille sans surcharger votre colonne d'articles.

Première étape :

Vous devez préparer 2 exemplaires de la même photo :

• la première en taille réduite,
• la seconde en taille normale.

Vous hébergez ces 2 photos et notez leur adresse respective.

Par exemple :

• la petite : http://idata.over-blog.com/0/37/17/67/articles/oeuf1.jpg 
• la grande : http://idata.over-blog.com/0/37/17/67/articles/oeuf2.jpg

Deuxième étape :

Vous insérez la petite photo dans votre article sur laquelle, vous créez un lien vers la grande photo avec ouverture dans une fenêtre pop up dont vous fixez les dimensions (les mêmes que celle de la grande photo).

En HTML, vous obtenez :

<a onclick="window.open(this.href,'','resizable=no,location=no,menubar=no,
scrollbars=no, status=no,toolbar=no,fullscreen=no,dependent=no,width=200,height=200,
status'); return false" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxANfELYWQNSTpoZf2edFD5Lsy0W93AyhAt5lz_P2_ZiVLLW5IZwuMdW7jPY9RegSBgTnSKH12Y5duQnVBb5kVUPdO_0oaitAAVvpl1hacXIonKqxr6ILaSM7je3VTTzMgOkHno_AsaY/s1600/oeuf2.jpg"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtHNwDEQiaQOIntaKZs7eX6btB_XklrcJQ1y3j4agArzBVKy1I-Q0VKfmK4G1xRQwSWHRZyBgaFvwsXvEfuOgnDcNRrc2ieybbTHWcfV1ukZXtiN9fo8o_TU0LglBg9zfPN50vr1p5sUg/s1600/oeuf1.jpg" /></font></a>

Vous modifiez les adresses de vos images (en rouge et bleu) et les dimensions (en vert)

Vous cliquez et vous admirez :


POUR AGRANDIR VOS PHOTOS AU SURVOL DE LA SOURIS

Vous allez dans le CSS - Design > Mode CSS, vous rajoutez

img:hover {width:200%;height:200%;}

width : représente la largeur
height : représente la hauteur

Attention, à ne pas trop augmenter les dimensions : risque de pixelisation et de dénaturation de l'image.