[AJAX] Div dynamique - Fichier PHP
Bonsoir,
Voici mon problème,
je possede une page php dans laquelle 4 images sont visibles. Ces 4 images sont placées dans un div.
Juste en face de ce div, j'en ai placé un autre en float, afin que lorsque l'on clique sur une des images, la requete d'un fichier php soit exécutée.
Ce fichier s'appelle test.inc.php
Malheureusement, je n'ai aucune idée de la facon dont il faut procéder, j'ai déja chipoter avec quelque script ajax que j'ai trouvé mais rien de concluant...
Si vous pouviez me mettre un exmple concret sous les yeux, ca serait sympa :D
voici mon code :
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> |
Merci d'avance ;)
