pb sur les fonctions

bonjour,

regarde d'abord cette discussion du forum "contribuez" de Javascript (cf. 1ère possibilité : Fenêtre enfant ouverte avec window.open() ).

A partir de là :

Page principale :

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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
var tabInfos = new Array(); //tableau contenant les objets a afficher
var fenFilleChargee = "false";  //pour verifier que la fenetre fille est chargee avant l envoi des informations
var fen;
 
//Initialisation des proprietes des objets
function initInfos()
{
 tabInfos[0] = new Object();                    //pour chaque element du tableau on cree un objet
 tabInfos[0]["nomImage"] = "Mes images/i1.gif"  //nom de l image a afficher
 tabInfos[0]["nomObjet"] = "objet 1";           //nom de l objet
 tabInfos[0]["prix"] = 2000;                    //prix de l objet
 
 tabInfos[1] = new Object();
 tabInfos[1]["nomImage"] = "Mes images/i2.gif"
 tabInfos[1]["nomObjet"] = "objet 2";
 tabInfos[1]["prix"] = 1;
 
 tabInfos[2] = new Object();
 tabInfos[2]["nomImage"] = "Mes images/i3.gif"
 tabInfos[2]["nomObjet"] = "objet 3";
 tabInfos[2]["prix"] = 20;
 
 tabInfos[3] = new Object();
 tabInfos[3]["nomImage"] = "Mes images/i4.gif"
 tabInfos[3]["nomObjet"] = "objet 4";
 tabInfos[3]["prix"] = 25.36;
}
 
//on ouvre la fenetre fille si elle n est pas dejà ouverte : fenFilleChargee=="false"
//si elle est deja ouverte on affiche l image en appelant la fonction presentation
function ouvreFenFille()
{
 if (fenFilleChargee=="false")
   fen = window.open("pop-up.htm","description","width=250, height=250");
 else
   presentation();
}
 
function presentation()
{
 var monImage = fen.document.getElementById("image");
 var monInfo = fen.document.getElementById("infos");
 var n, txt;
 
 if (monImage!=null && monInfo!=null)
 {
   //on recupere la valeur selectionnee dans la liste
   n = parseInt(document.getElementById("combo").value);
   //alert(n);
   n = n-1; //pour coincider avec l indice du tableau
 
   //on recupere les informations de l objet n
   monImage.src = tabInfos[n]["nomImage"];
 
   txt = "Nom de l'objet : "+tabInfos[n]["nomObjet"]+"<br />";
   txt += "Prix de l'objet : "+tabInfos[n]["prix"]+"&euro;";
   monInfo.innerHTML = txt;
 
   fen.focus();  //focus de la fenetre fille
 }
 
 
}
 
//-->
</script>
 
</head>
 
<body onload="initInfos()">
<div>
 
<select size="1" id="combo">
    <option selected="selected" value="1">Image 1</option>
    <option value="2">Image 2</option>
    <option value="3">Image 3</option>
    <option value="4">Image 4</option>
</select>
 
<input type="button" value="Afficher" onclick="ouvreFenFille()" />
 
</div>
 
</body>
 
</html>

fenêtre pop-up (nom du fichier : pop-up.htm)

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
body{
 background-color: #66ccff;
}
 
#image{
 height: 80px;
}
 
#infos{
 border: #AAAAAA ridge 4px;
 padding: 10px;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
//fonction appellee apres le chargement de la fenetre fille
//window.opener :  fenetre parent
//fenFilleChargee passe à "true" et on affiche l objet par l appel de la fonction presentation()
function fenChargee()
{
 window.opener.fenFilleChargee = "true";
 window.opener.presentation();
}
 
//lorsque l utilisateur ferme cette fenetre fenFilleChargee passe à "false"
function fenDeChargee()
{
 window.opener.fenFilleChargee = "false";
}
 
//-->
</script>
 
</head>
 
<body onload="fenChargee()" onunload="fenDeChargee()">
<div>
<img id="image" alt="" src="" />
</div>
<div id="infos"></div>
 
</body>
 
</html>

La page 2 (fenêtre pop-up) a été créée au préalable avec tous les éléments nécessaires :

la feuille de style
les fonctions pour vérifier que la fenêtre pop-up est ouverte ou fermée
une balise img pour l'image de l'objet sélectionné
un div qui contiendra les informations sur l'objet

cela évite les document.write()... ;)