Discussion :

[timoun]

Salut à tous

N'ayant rien trouvé sur le forum, je me lance.
Je teste un code depuis hier et ne parviens pas à mes fins.
Je souhaite zoomer une image (une carte) en gardant les mêmes dimensions pour n'en zoomer qu'une partie.

le html donne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
		<div class="zoom">
 		    <p>
			<a href="#" title="Localisation"></a> 
                    </p>
		</div>

et le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.zoom {
   width: 486px;
   height: 228px;
   background: url(carte.jpg) no-repeat;
   margin: 0 auto; 
}
.zoom p, .zoom a {
   height: 228px;
   display: block;
   margin:0
}
.zoom a:hover {
   background: url(carte.jpg) no-repeat 0 -228px;
   cursor:help;
}

la taille originale de l'image est:width 486 et height 456 .

Le tutoriel CSS que j'essaie de suivre est là : http://css.developpez.com/cours/


Ce que je ne comprends pas est la définition de .zoom1:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.zoom {
   width: 486px;
   height: 228px;
   background: url(carte.jpg) no-repeat;
   margin: 0 auto; 
}
}

en effet, dans ce cas ne s'affiche que la moitié de ma carte originale avant le zoom et l'effet produit n'est évidemment pas ce que je recherche.
Et dans le cas ou je lui donne sa taille réelle, l'effet n'est pas mieux... il n'y a pas de zoom...

Si certains d'entre vous maitrisent cette technique et peuvent m'expliquer, je leur serais très reconnaissant.
Merci d'avance.
Timoun

[timoun]

c'est OK, j'ai résolu le problème à ma façon.