Aller au contenu

zoom d'image css


Messages recommandés

Bonjour,

 

Je suis débutante en css. J'ai fait une fonction qui permet de zoomer sur image mais quand je l'ai appliquée à mon site, ça me décale mon image d'origine vers le bas. Voyez par vous même (c'est pas beau!): http://membres.lycos.fr/flore3110/tiflo/construction.php

 

Et puis j'ai aussi un autre bug, mes images passent par dessus l'image zoomée... :mmm:

 

Si quelqu'un pouvait m'aider, ce serait sympa! Merci d'avance!

 

Nemeuh

Lien vers le commentaire
Partager sur d’autres sites

Voila mon code pour une de mes images. Si ça peut vous aider à m'aider!!! lol

 

en css:

a.zoom1 {
position: absolute;
marging-top: 237px;
display: block;
background-image: url('spirale/essai_flore_r2_c9.jpg');
width: 87px;
height: 62px;
}
a.zoom1:hover {
background-image: url('spirale/essai_flore_r2_c9bis.jpg');
width: 469px;
height: 323px;
}

 

en html (pour appeller la fonction):

<td rowspan="2" colspan="5"><a href="#" class="zoom1"></a></td>

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

 

Pourquoi tant de haine et d'utilisation des frames. :D

 

Sinon, pourquoi pas ça.(j'ai horreur des tableaux et frames, c'est lourds et contraignant :D )

 

Dans la page web:
<div class=a.zoom1><img src="adresse de l'image" alt="description de l'image" /></div>

Dans le css:
a.zoom1 {
margin: auto;
height:
}
*/Tu défini la taille de l'image que tu veux initialement*/ 
a.zoom1 img { 
width: <xxx>px; 
height: <yyy>px;
}
*/Taille de l'image en zoom*/
a.zoom1 img:hover {
width: <XXX>px; 
height: <YYY>px;
*/Tu peux aussi définir la plce de l'élément avec un attribut de style p*/
a.zoom1 p {
tu peux définir la postition de l'image ici par rapport à l'emplacement du calque. :D
}

 

C'est la méthode css, il y en as une autre, mais c'est la plus simple, et on s'en fout de Internet Explorer à la fin, ils n'ont qu'a se mettre au niveau des Préhistoric Browsers comme le dirait si bien certain. :D

 

Si tu veux l'autre méthode je me referais une joie, je n'ai que ça à faire :D

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...