insertion d'une images

Version imprimable

16/05/2007, 13h04
tioseb

insertion d'une images

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>

Code:

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>

et celui ci là ou tu veux mettre l'image

Code:

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>

16/05/2007, 13h13
Deallyra

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 ;)
16/05/2007, 13h19
FraK

;p (jme suis fait greffer une main en plus en fait, comme ca jpeux taper au clavier tout en fumant sans perdre de temps )
16/05/2007, 13h31
Deallyra

Beuheu...

Pas juste... Je ne fume pas et je ne vais pas plus vite pour autant... :traine:

tioseb
si tu as plusieurs images, il te suffit de faire

<head>

Code:

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>

et pour les images

Code:

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>

etc ...