insertion d'une images

**tioseb** · 16/05/2007, 13h04

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??

**FraK** · 16/05/2007, 13h13

en JS tu peux le faire allègrement
place ce code dans ta balise <head>

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>

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
<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>

**Deallyra** · 16/05/2007, 13h13

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

**FraK** · 16/05/2007, 13h19

;p (jme suis fait greffer une main en plus en fait, comme ca jpeux taper au clavier tout en fumant sans perdre de temps )

**Deallyra** · 16/05/2007, 13h31

Beuheu...

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

**FraK** · 16/05/2007, 14h45

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

<head>

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>

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
<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 ...

insertion d'une images

HTML

Discussions similaires

Partager

Partager