CoupdePouce

Je vous propose un petit amusement à faire sur votre blog.

Tout d'abord avec photofiltre ouvrez un document vierge de 400X600px, ensuite ouvrez une image de votre choix de 400X300px, faites-en une copie en la réduisant de moitié( 200x150px); collez la première image dans le document en mode automatique < BAS > et la plus petite, mode automatique <HAUT>. Vous aurez ainsi obtenu une image de 400X600px, ernregistrez-la dans la Mediathèque.

Copiez le code ci-dessous dans votre feuille de style:

.zoom {  width: 400px;  height: 300px;  background: transparent url(url_image);  background-repeat: no-repeat;  margin: 0 auto; } .zoom p, .zoom a { height: 300px; display: block; margin:0; } .zoom a:hover { background: transparent url(url_image); background-position: 0 -300px; background-repeat:no-repeat; }

Puis dans votre article copiez ceci:

<div class="zoom"><p><a href="#"></a></p></div>

Regardez le résultat en sélectionnant l'image:

Variante

On peut choisir évidemment de garder les mêmes dimensions d'images pour ne zoomer qu'une partie.

Pour cette variante qui fonctionne avec IE, j'ai choisi de zoomer la partie du haut à droite. Cette fois, la « remontée » de l'image ne doit être que de 225 pixels. Prenez une image, avec photofiltre copiez une zone de celle-ci; attention! les deux images doivent faire 300X225px. Faites ensuite, edition>collage spécial>assemblé le collage>direction bas, et enregistré-la dans la Mediathèque. Une fois tranferée, copiez le code dans la feuille de style:

.zoom1 { width: 300px; height: 225px; background: transparent url(img.jpg); background-repeat:no-repeat; margin: 0 auto; } .zoom1 p, .zoom1 a { height: 225px; display: block; margin:0 auto; } .zoom1 a:hover { background: transparent url(img.jpg); background-position: 0px -225px; background-repeat: no-repeat; }

Et le code html:

<div class="zoom1"><p><a href="#"></a></p></div>

Pourquoi une fausse url?

Et bien, c'est par-ce que c'est la feuille de style qui va provoquer l'action.

Résultat: