Je cherche a avoir une images qui apparaisse en petit apercu sur ma page web et je veux que quand passe dessus avec mon pointeur elle apparaisse en grand.
J'ai déjà vu ca. Quelqu'un peut m'aider??
Je cherche a avoir une images qui apparaisse en petit apercu sur ma page web et je veux que quand passe dessus avec mon pointeur elle apparaisse en grand.
J'ai déjà vu ca. Quelqu'un peut m'aider??
en JS tu peux le faire allègrement
place ce code dans ta balise <head>
et celui ci là ou tu veux mettre l'image
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 <script language="JavaScript"> <!-- var coeff=4;//Coefficient de reduction var larg=400;//largeur maxi de l'image var haut=388;//hauteur maxi de l'image var coeffinit=coeff; function changer() { if (document.image.width < larg) { coeff = coeff-0.2; document.image.width = Math.round(larg/coeff); document.image.height = Math.round(haut/coeff); chang=window.setTimeout('changer();',60); //vitesse de l'effet } else {window.clearTimeout(chang);} } function initial() { if (document.image.width > larg/coeffinit) { window.clearTimeout(chang); coeff = coeff+0.2; document.image.width = Math.round(larg/coeff); document.image.height = Math.round(haut/coeff); initi=window.setTimeout('initial();',60); //vitesse de l'effet } else {window.clearTimeout(initi);} } //--> </script>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 <div align="center"> <a name="img"></a> <a href="#img" onMouseOut="initial()" onMouseOver="changer()" ><img src="bla.gif/.jpg" border="0" name="image"></a></div> <script language="JavaScript"> <!-- document.image.width = Math.round(larg/coeff); document.image.height = Math.round(haut/coeff); //--> </script>
Infographiste / Webdesigner / Intégrateur (un peu Développeur aussi si on peut dire ;p)
On me trouve souvent dans la partie Hardware, Systèmes et Logiciels ou encore Webmasters - Développement Web et surtout dans le forum Wordpress.
»» Mon Blog Musical (drumnbass)
l'attribut onmouseover
<ELEMENT onmouseover = "script à exécuter"...>
edit: Frak est passé à quelques centièmes de secondes avant moi... Mais sa solution est plus complète![]()
*Si la réponse vous convient, n'oubliez pas le tag
*Exprimez vous dans un français correct; on prend le temps de vous lire, prenez le temps de bien écrire.
*Et comment on interprète votre code? N'oubliez pas la balise!
*Pour une mise en page simple avec des divs.
*Pour faire des formulaires xHTML CSS.
;p (jme suis fait greffer une main en plus en fait, comme ca jpeux taper au clavier tout en fumant sans perdre de temps )
Infographiste / Webdesigner / Intégrateur (un peu Développeur aussi si on peut dire ;p)
On me trouve souvent dans la partie Hardware, Systèmes et Logiciels ou encore Webmasters - Développement Web et surtout dans le forum Wordpress.
»» Mon Blog Musical (drumnbass)
Beuheu...
Pas juste... Je ne fume pas et je ne vais pas plus vite pour autant...![]()
*Si la réponse vous convient, n'oubliez pas le tag
*Exprimez vous dans un français correct; on prend le temps de vous lire, prenez le temps de bien écrire.
*Et comment on interprète votre code? N'oubliez pas la balise!
*Pour une mise en page simple avec des divs.
*Pour faire des formulaires xHTML CSS.
tioseb
si tu as plusieurs images, il te suffit de faire
<head>
et pour les 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
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"> <!-- 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>
etc ...
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"> <!-- 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>
Infographiste / Webdesigner / Intégrateur (un peu Développeur aussi si on peut dire ;p)
On me trouve souvent dans la partie Hardware, Systèmes et Logiciels ou encore Webmasters - Développement Web et surtout dans le forum Wordpress.
»» Mon Blog Musical (drumnbass)
Partager