Franc83

Zoom CSS 2

20-07-2008

CSS zoom image 2 - zoom sur zone

Technique utilisée :

C'est la technique des portes coulissantes qui a été reprise ici, mais adaptée à un zoom sur image.

C'est en fait une image de 524px de haut et de 350px de large, avec dans la moitié supérieure l'image de base de 350x262 et cachée par un div de 350x262, la seconde image qui remontera grâce à la fonction a:hoover lors du passage de la souris :

Voici les codes :

Le CSS dans un fichier externe appelé dans le header, ou à mettre dans entre les balises <head> :

><style type="text/css">
.normal {
width: 350px;
height: 262px;
background-image: url(autozoom.jpg);
background-repeat: no-repeat;
margin: 0 auto 0 auto;
}
.normal p, .normal a {
height: 262px;
display: block;
margin:0
}
.normal a:hover {
background-image: url(autozoom.jpg);
background-position: 0 -262px;
background-repeat:no-repeat;
cursor:help;
}
</style>

Le width et height permetttent de définir la taille de l'image montrée et elle sera reprise dans le div, ce qui ne montrera que la partie supérieure ou se situe l'imagede base.
Le margin: 0 auto, qui veut dire en fait 0 auto 0 auto, ou les marges dans l'ordre haut droite bas gauche, ou dans l'exemple haut/bas puis droite/gauche, permet de centrer l'image, au mieux, car les navigateurs sont capricieux.
Le display:block; permet permet de faire glisser l'autre image zoomée vers le haut
Enfin le background-position: 0 -262px; permet de faire remonter l'image cachée à la place de l'image de base.

Le code html à mettre dans la balise <body> :

Dans le même esprit
Diaporama Lightbox Test pour Thickbox Diaporama javascript Image polaroïd Diaporama en popup Popup Dimensionnables Rollover sur Images Image Spotlight Zoom Css Zomm Javascript Ajax Puzzle

Citez cet article

Commenter cet article

Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés. Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur. Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire
Code:*
	Je désire être prévenu par mail des commentaires qui suivront