Creer div dynamique

Version imprimable

30/04/2009, 10h17
20cents

Creer div dynamique

Bonjour,

Alors voilà, je possede 4 images ayant chacune un lien vers une page différente de mon site.

Mais maintenant je voudrais rendre cela un peu plus dynamique, j'ai créé deux div. Un qui contient mes images et l'autre qui devrait changer automatiquement en fonction de l'image sur laquelle on a cliqué.

Il y aura donc 4 contenus possible pour ce div. Alors, comme je ne m'y connais pas du tout en javascript, je vous demande conseil, et si possible de me mettre un exemple concret sous les yeux, parce que je suis perdu...:?

J'ai déja pas mal chipoté mais je ne m'en sors pas du tout :D

Merci d'avance

Vinc
30/04/2009, 10h27
andry.aime

Salut,
La réponse est dans la FAQ
http://javascript.developpez.com/faq...DOM#DOMajouter

Salut,

Il y a certainement mieux (je débute également en javascript) mais ça fonctionne.

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
 
<html>
<head>
<script type="text/javascript">
function changediv(image) {
 switch (image) {
  case 1:
	document.getElementById("modifier").innerHTML = '<a> click sur image 1</a>';
  break
  case 2:
	document.getElementById("modifier").innerHTML = '<a> click sur image 2 </a>';
  break
  default:
  document.getElementById("modifier").innerHTML = '<a>Pas drole</a>';
 }
}
</script
</head>
<body>
<div id="mesImages">
<img src="./Image1.gif" onclick="changediv(1);">
<img src="./Image2.gif" onclick="changediv(2);">
</div>
<div id="modifier">
</div>
</body>
</html>

30/04/2009, 14h12
20cents

Merci, ca marche nikel :)

Encore une petite question, est ce que je peux introduire de php dans le div ?

Parce que j'ai besoin de requetes sql...

document.getElementById("modifier").innerHTML = '<a> click sur image 1</a>';

Je peux donc mettre du php entre les deux <a></a> ?

Merci
30/04/2009, 14h36
andry.aime

Tu ne peut pas, Php tourne sur le serveur et javascript sur le client.
Mais tu peux utiliser AJAX après la création du div pour appeler un fichier php qui va executer ton sql.

Ah ok,

Mais comment on fait concretement ? Qqn peut m'aider ?

Merci

Voici mon code pour le moment :

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
 
<html>
<head>
<script type="text/javascript">
 
<!--
  image1 = new Image;
  image1.src = "./images/css_on2.png";
  image2 = new Image; 
  image2.src = "./images/css_off2.png";
  image3 = new Image;
  image3.src = "./images/css_on3.png";
  image4 = new Image; 
  image4.src = "./images/css_off3.png";
  image5 = new Image;
  image5.src = "./images/css_on4.png";
  image6 = new Image; 
  image6.src = "./images/css_off4.png";
  image7 = new Image;
  image7.src = "./images/css_on5.png";
  image8 = new Image; 
  image8.src = "./images/css_off5.png";
-->
 
function changediv(image)
{
	switch (image)
	{
  		case 1:
		document.getElementById("capacites").innerHTML = '<?php include("./includes/test.inc.php"); ?>'; // Ne fonctionne pas :D
  		break
 
		case 2:
		document.getElementById("capacites").innerHTML = '<a> click sur image 2 </a>';
  		break
 
		case 3:
		document.getElementById("capacites").innerHTML = '<a> click sur image 2 </a>';
  		break
 
		case 4:
		document.getElementById("capacites").innerHTML = '<a> click sur image 2 </a>';
  		break
 
 		default:
  		document.getElementById("capacites").innerHTML = '<a></a>';
 	}
}
 
</script>
</head>
<body>
<div id="welcome">
 
 
<? include("includes/bouton_flash.inc.php"); ?>
 
<a onClick="changediv(1);" onMouseOver="wars2on2.src=image2.src" onMouseOut="wars2on2.src=image1.src" style="padding-left:12px;"><img src="./images/css_on2.png" alt="Wars 2on2" width="248" height="53" name="wars2on2"></a>
            <br />
            <a onclick="changediv(2);" onMouseOver="wars3on3.src=image4.src" onMouseOut="wars3on3.src=image3.src" style="padding-left:12px;"><img src="./images/css_on3.png" alt="Wars 3on3" width="248" height="53" name="wars3on3"></a>
            <br />
            <a onclick="changediv(3);" onMouseOver="wars4on4.src=image6.src" onMouseOut="wars4on4.src=image5.src" style="padding-left:12px;"><img src="./images/css_on4.png" alt="Wars 4on4" width="248" height="53" name="wars4on4"></a>
            <br />
             <a onclick="changediv(4);" onMouseOver="wars5on5.src=image8.src" onMouseOut="wars5on5.src=image7.src" style="padding-left:12px;"><img src="./images/css_on5.png" alt="Wars 5on5" width="248" height="53" name="wars5on5"></a>
 
 
</div>
<div id="capacites">
</div>
</body>
</html>

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
function charge(serverPage, objID) 
{
	xmlhttp=createXHR();
	var obj = document.getElementById(objID);
	xmlhttp.open("GET", serverPage);
	xmlhttp.setRequestHeader('Content-Type','text/html; charset=iso-8859-1');
	xmlhttp.onreadystatechange = function() 
		{
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
				{
					obj.innerHTML = xmlhttp.responseText;
				}
		}
	xmlhttp.send(null);
}
function createXHR() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
		try {
			request = new XMLHttpRequest();
		}
		catch (err1) 
		{
			request = false;
		}
            }
        }
    return request;
}

Code:

1
2
3
case 1:
		charge("includes/test.inc.php","capacites") ;
  		break;

Voir les totoriels
http://ajax.developpez.com/cours/

Je viens de tester et ca ne fonctionne pas.

J'ai même mis le fichier test.php à la racine et toujours rien...

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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
<html>
<head>
 
<script type="text/javascript">
 
function charge(serverPage, objID) 
{
	xmlhttp=createXHR();
	var obj = document.getElementById(objID);
	xmlhttp.open("GET", serverPage);
	xmlhttp.setRequestHeader('Content-Type','text/html; charset=iso-8859-1');
	xmlhttp.onreadystatechange = function() 
		{
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
				{
					obj.innerHTML = xmlhttp.responseText;
				}
		}
	xmlhttp.send(null);
}
function createXHR() 
{
    var request = false;
        try {
            request = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch (err2) {
            try {
                request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (err3) {
		try {
			request = new XMLHttpRequest();
		}
		catch (err1) 
		{
			request = false;
		}
            }
        }
    return request;
}
 
<!--
  image1 = new Image;
  image1.src = "./images/css_on2.png";
  image2 = new Image; 
  image2.src = "./images/css_off2.png";
  image3 = new Image;
  image3.src = "./images/css_on3.png";
  image4 = new Image; 
  image4.src = "./images/css_off3.png";
  image5 = new Image;
  image5.src = "./images/css_on4.png";
  image6 = new Image; 
  image6.src = "./images/css_off4.png";
  image7 = new Image;
  image7.src = "./images/css_on5.png";
  image8 = new Image; 
  image8.src = "./images/css_off5.png";
-->
 
function changediv(image)
{
	switch (image)
	{
  		case 1:
		charge("capacites","test.php");
  		break
 
		case 2:
		document.getElementById("capacites").innerHTML = '<a> click sur image 2 </a>';
  		break
 
		case 3:
		document.getElementById("capacites").innerHTML = '<a> click sur image 2 </a>';
  		break
 
		case 4:
		document.getElementById("capacites").innerHTML = '<a> click sur image 2 </a>';
  		break
 
 		default:
  		document.getElementById("capacites").innerHTML = '<a></a>';
 	}
}
 
</script>
 
 
</head>
<body>
<div id="welcome">
 
 
<? include("includes/bouton_flash.inc.php"); ?>
 
<a onClick="changediv(1);" onMouseOver="wars2on2.src=image2.src" onMouseOut="wars2on2.src=image1.src" style="padding-left:12px;"><img src="./images/css_on2.png" alt="Wars 2on2" width="248" height="53" name="wars2on2"></a>
            <br />
            <a onclick="changediv(2);" onMouseOver="wars3on3.src=image4.src" onMouseOut="wars3on3.src=image3.src" style="padding-left:12px;"><img src="./images/css_on3.png" alt="Wars 3on3" width="248" height="53" name="wars3on3"></a>
            <br />
            <a onclick="changediv(3);" onMouseOver="wars4on4.src=image6.src" onMouseOut="wars4on4.src=image5.src" style="padding-left:12px;"><img src="./images/css_on4.png" alt="Wars 4on4" width="248" height="53" name="wars4on4"></a>
            <br />
             <a onclick="changediv(4);" onMouseOver="wars5on5.src=image8.src" onMouseOut="wars5on5.src=image7.src" style="padding-left:12px;"><img src="./images/css_on5.png" alt="Wars 5on5" width="248" height="53" name="wars5on5"></a>
 
 
</div>
<div id="capacites">
</div>
</body>
</html>

Merci d'avance

02/05/2009, 14h10
andry.aime
Salut,
Dans la fonction charge, j'ai mis en premier paramètre la page appelée ensuite l'id du du div. Mais tu l'as inversé lors de ton appel.
Code:

1 2 3 case 1: charge("test.php","capacites"); break