Discussion :

[vocal94130]

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]

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"

[vocal94130]

Oki, effectivement ça marche et pour la faire grossir sur place comment je fais?

Merci pour ta réponse.

[bigboomshakala]

tip : si ton image grossit de X en largeur et Y en hauteur, alors tu la déplaces en left de -X/2 et en top de -Y/2

[vocal94130]

Okey !! Merci beaucoup pour ton aide .

[SpaceFrog]

sinon un effet sympa avec jquery
http://huydinh.co.uk/blog/2008/09/04...agnify-plugin/