Creer div dynamique

**20cents** · 30/04/2009, 10h17

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

Merci d'avance

Vinc

**andry.aime** · 30/04/2009, 10h27

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

**SPACHFR** · 30/04/2009, 11h03

Salut,

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

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

**20cents** · 30/04/2009, 14h12

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

**andry.aime** · 30/04/2009, 14h36

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.

**20cents** · 30/04/2009, 14h47

Ah ok,

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

Merci

Voici mon code pour le moment :

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

Creer div dynamique

JavaScript

Vue hybride

Discussions similaires

Partager

Partager