Zoom sur une image [css] - HTML/CSS - Programmation
MarshPosté le 24-01-2006 à 17:07:01
bonjour,
j'ai fai en css un zoom sur une image lorsque la souris passe dessus, j'utilise la methode avec l'image en fond d'ecran sinon ca ne marche pas sous internet explorer
Citation :
/* Zoom d'une image quand on passe la souris dessus */ .zoom1 { width: 600px; height: 150px; background-image: url(../images/mon_image.png); background-repeat: no-repeat; margin: 0 auto; } .zoom1 p, .zoom1 a { height: 600px; display:block; margin:0; } .zoom1 a:hover { background-image: url(../images/mon_image.png); background-position: 0 -150px; background-repeat:no-repeat; cursor:text; }
J'ai creer une image qui contient les deux images celle reduite et celle d'une taille superieur jsute en dessous, le pb est que sous internet explorer j'ai toute mon image qui est affiché alors que normalement il ne devrait y avoir que celle qui est petite et lorsque que je mets ma souris dessus j'ai bien la deuxieme image qui passe dessus l'image se trouve ici http://alex.bedomon.free.fr/Sans%20titre.png
et dans mon html j'ai juste ceci
Citation :
<div class="zoom1"> <p> <a href="#" title="apercu du logiciel"></a> </p> </div>
Marsh Posté le 24-01-2006 à 17:07:01
bonjour,
j'ai fai en css un zoom sur une image lorsque la souris passe dessus, j'utilise la methode avec l'image en fond d'ecran sinon ca ne marche pas sous internet explorer
/* Zoom d'une image quand on passe la souris dessus */
.zoom1 {
width: 600px;
height: 150px;
background-image: url(../images/mon_image.png);
background-repeat: no-repeat;
margin: 0 auto;
}
.zoom1 p, .zoom1 a {
height: 600px;
display:block;
margin:0;
}
.zoom1 a:hover {
background-image: url(../images/mon_image.png);
background-position: 0 -150px;
background-repeat:no-repeat;
cursor:text;
}
J'ai creer une image qui contient les deux images celle reduite et celle d'une taille superieur jsute en dessous, le pb est que sous internet explorer j'ai toute mon image qui est affiché alors que normalement il ne devrait y avoir que celle qui est petite
et lorsque que je mets ma souris dessus j'ai bien la deuxieme image qui passe dessus
l'image se trouve ici
http://alex.bedomon.free.fr/Sans%20titre.png
et dans mon html j'ai juste ceci
<div class="zoom1">
<p>
<a href="#" title="apercu du logiciel"></a>
</p>
</div>