Franc83


Zoom Css Convertir en PDF Version imprimable
19-07-2008

CSS zoom image



Script proposé par mammouthland



Technique utilisée :



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



C'est en fait une image de 750px de haut et de 500px de large, avec dans la moitié supérieure la petite image dans un espace de 500x375 et cachée par un div de 500x375 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: 500px;
height: 375px;

background-image: url(zoom.jpg);
background-repeat: no-repeat;
margin: 0 auto;
border-bottom:1px solid black;
}
.normal p, .normal a {
height: 375px;
display: block;
margin:0
}
.normal a:hover {
background-image: url(zoom.jpg);
background-position: 0 -375px;
background-repeat:no-repeat;
cursor:help;
}
</style>



Le width et height permetttent de définir la taille de la grande image et elle sera reprise dans le div, ce qui ne montrera que la partie supérieure ou se situe la petite image.



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 la grande image vers le haut



Enfin le background-position: 0 -375px; permet de faire remonter l'image taille réelle à la place de la petite image.



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




<div align="center">
<div class="normal">
<p>
<a href="#" title="Octet Sabato">
</a>
</p>
</div>
</div>



Dans le même esprit



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:Web AddressEmail AddressBold TextItalic TextUnderlined TextQuoteCodeOpen ListList ItemClose List
Commentaire



Code:* Code
Je désire être prévenu par mail des commentaires qui suivront

Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved

 
< Précédent   Suivant >

Liens amis

Compteur.org

e-dilik.fr

NetFox2.net

IgloOps.fr

Infostuces

Mixx Radio Gold

Mobile Astuces

-------------

Votre site ici

Notre logo

Aide et astuces pour  blogs

Cliquez droit dans la zone où se trouve le code html et "copier"


Nos autres Logos...

S'abonner

devenir amis sur facebook

Votre adresse email ici pour recevoir les nouveautés du site directement dans votre boite

Nos Gadgets

Installez nos gadgets

gratuits Live Spaces

albi-gadget.jpg

Albidochon

oeil2moscou.jpg

Oeil 2 Moscou

Aidez-nous

aidez-nous

Recommandez ce
site à un ami

Statistiques

Generated in 0.58198 Seconds