Effet loupe sur une photo

**vocal94130** · 19/06/2009, 12h57

Bonjour

J'espère trouver un peu d'aide par ici.

Je souhaiterais faire une carte du monde avec les continents et dès que la souris passe sur un continent, il grossit !

J'ai le code suivant pour faire un effet loupe, mais quand un continent grossit, tous les autres se déplacent :

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script id="Afrique" language="JavaScript"><!--Effet zoom sur image Afrique-->
<!--
//PLF-http://www.jejavascript.net/
var coeff=2;//Coefficient de reduction
var larg=190;//largeur maxi de l'image
var haut=220;//hauteur maxi de l'image
var coeffinit=coeff;
function changer1() {
if (document.image1.width < larg) {
coeff = coeff-0.2;
document.image1.width = Math.round(larg/coeff);
document.image1.height = Math.round(haut/coeff);
chang=window.setTimeout('changer1();',60);//vitesse de l'effet
}
else {window.clearTimeout(chang);}
}
function initial1() {
if (document.image1.width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image1.width = Math.round(larg/coeff);
document.image1.height = Math.round(haut/coeff);
 
initi=window.setTimeout('initial1();',60);//vitesse de l'effet
}
else {window.clearTimeout(initi);}
}
//-->
</script> <!--Afrique -->
 
<div id="Afrique">
 
			<a href="#Afrique" onmouseout="initial1()" onmouseover="changer1()"><img border="0" src="/home/quentin/EasyLove/Images/Afrique.png" name="image1" /></a></p>
		<p>
		<script language="JavaScript">
		<!--
		//PLF-http://www.jejavascript.net/
		document.image.width = Math.round(larg/coeff);
		document.image.height = Math.round(haut/coeff);
		//-->
		</script></p>
	</div>

Merci à ceux qui prendrons le temps de m'aider.

**bigboomshakala** · 19/06/2009, 13h32

si tes images sont en positionnement "fixed" (pas défaut) c'est normal...
il faut un positionnement absolu pour que chacun ait une position fixe dans le doc. et l'image qui grossit, en plus de grossir, devra être déplacé pour qu'on ait l'impression qu'elle reste centrée au même endroit

TODO : rechercher "css position absolute fixed left top"