Discussion :

[ghost73]

bonjour a tous

voila j'ais des liens sur des images et je voudrai mettre un effet de zoom au survol de ses images en javascript

bien à vous

Code html :

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

1
2
3
4
5

<div class="pic">
<div class="ls img"><a href="300.php"><img src="Images/back300.jpg" alt=" "></a></div><ul><li>300</li></ul></div>
</div>

[Diablo_22]

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
var coeff=4;//Coefficient de reduction
var larg=200;//largeur maxi de l'image
var haut=194;//hauteur maxi de l'image
var coeffinit=coeff;
function changer(sel) {
switch(sel){
case 1 : //image 1
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('changer(1);',60);//vitesse de l'effet
}
break;
case 2 : //image 2
if (document.image2.width < larg) {
coeff = coeff-0.2;
document.image2.width = Math.round(larg/coeff);
document.image2.height = Math.round(haut/coeff);
chang=window.setTimeout('changer(2);',60);//vitesse de l'effet
}
break;
case 3 : //image 3
if (document.image3.width < larg) {
coeff = coeff-0.2;
document.image3.width = Math.round(larg/coeff);
document.image3.height = Math.round(haut/coeff);
chang=window.setTimeout('changer(3);',60);//vitesse de l'effet
}
break;
//images suivantes ...
}
if (document.image2.width >= larg) window.clearTimeout(chang);
}
 
function initial(sel) {
switch(sel){
case 1 : //image 1
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('initial(1);',60);//vitesse de l'effet
}
break;
case 2 : //image 2
if (document.image2.width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image2.width = Math.round(larg/coeff);
document.image2.height = Math.round(haut/coeff);
initi=window.setTimeout('initial(2);',60);//vitesse de l'effet
}
break;
case 3 : //image 3
if (document.image3.width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image3.width = Math.round(larg/coeff);
document.image3.height = Math.round(haut/coeff);
initi=window.setTimeout('initial(3);',60);//vitesse de l'effet
}
break;
//images suivantes ...
}
if (document.image1.width < larg/4) window.clearTimeout(initi);
}
//-->
</script>

Puis insére ce code à l'endroit des Images

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
<p align="center">
<a href="#" onMouseOut="initial(1)" onMouseOver="changer(1)" ><img src="im/imaga.gif" name="image1" border="0"></a>
</p>
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
document.image1.width = Math.round(larg/coeff);
document.image1.height = Math.round(haut/coeff);
//-->
</script>
<p align="center">
<a href="#" onMouseOut="initial(2)" onMouseOver="changer(2)" ><img src="im/imagb.gif" name="image2" border="0"></a>
</p>
<script language="JavaScript">
<!--
document.image2.width = Math.round(larg/coeff);
document.image2.height = Math.round(haut/coeff);
//-->
</script>
<p align="center">
<a href="#" onMouseOut="initial(3)" onMouseOver="changer(3)" ><img src="im/imagc.gif" name="image3" border="0"></a>
</p>
<script language="JavaScript">
<!--
document.image3.width = Math.round(larg/coeff);
document.image3.height = Math.round(haut/coeff);
//-->
</script>

[progdebutant]

Merci pour ton code je t'ai mis +1
Il m'a bien servi, j'ai juste ajouté le mot "style" pour changer la taille de l'image.

Et celle-là j'ai pas compris pourquoi ça reparle de image1 à la fin du premier switch :

Code :

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

1
2
 
if (document.image1.width < larg/4) window.clearTimeout(initi);