Bonsoir à tous,

je développe actuellement un système assez sympa pour proposer à un internaute d'uploader des images à certains endroits d'une page.
La disposition des images se fait en colonnes et rangées : je n'utilise pas de tableau HTML pour cela.
J'utilise des div positionnés en colonnes qui, lorsque l'on clique dessus, se change en input type="file".
Je dispose également d'un lien "Ajouter une rangée de photos" qui génère une nouvelle rangée à 4 colonnes de photos.

Ce système fonctionne sous Firefox mais pas sous IE6... Pouvez-vous me dire pourquoi ?


NB : désolé pour la mocheté du code HTML, ce n'est pas moi qui ai fait la mise en page...


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
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
 
var compteur_rangee = 1;
var nb_photos = 4;
 
</script>
</head>
 
<script type="text/javascript">
 
 
function suppr_image(elem) {
 
	add_input(elem);
 
}
 
 
function add_input(elem) {
 
	nouvdiv = document.createElement('div');
	nouvinput = document.createElement('input');
	nouvinput.setAttribute("type", "file");
	nouvinput.setAttribute("name", "photo_1");
 
	elem.parentNode.replaceChild(nouvdiv, elem);
	nouvdiv.appendChild(nouvinput);
 
}
 
 
function add_rangee() {
 
	conteneur = document.createElement('div');
	conteneur.setAttribute("id", "rangee"+(compteur_rangee+1));
	conteneur.setAttribute("class", "rangee_photos");
 
	nouvdiv1 = document.createElement('div');
	nouvdiv1.setAttribute("id", "photo"+(nb_photos+1));
	nouvdiv1.setAttribute("class", "photo_rangee col1");
	nouvdiv1.setAttribute("onclick", "suppr_image(this);");
 
	nouvdiv2 = document.createElement('div');
	nouvdiv2.setAttribute("id", "photo"+(nb_photos+2));
	nouvdiv2.setAttribute("class", "photo_rangee col1");
	nouvdiv2.setAttribute("onclick", "suppr_image(this);");
 
	nouvdiv3 = document.createElement('div');
	nouvdiv3.setAttribute("id", "photo"+(nb_photos+3));
	nouvdiv3.setAttribute("class", "photo_rangee col1");
	nouvdiv3.setAttribute("onclick", "suppr_image(this);");
 
	nouvdiv4 = document.createElement('div');
	nouvdiv4.setAttribute("id", "photo"+(nb_photos+4));
	nouvdiv4.setAttribute("class", "photo_rangee col1");
	nouvdiv4.setAttribute("onclick", "suppr_image(this);");
 
	titre_rangee = document.createElement('p');
	texte_rangee = document.createTextNode("Rangée de photos n°"+(compteur_rangee+1));
	titre_rangee.appendChild(texte_rangee);
 
 
	document.getElementById("conteneur_rangees").appendChild(titre_rangee);
	cont = document.getElementById("conteneur_rangees").appendChild(conteneur);
	cont.appendChild(nouvdiv1);
	cont.appendChild(nouvdiv2);
	cont.appendChild(nouvdiv3);
	cont.appendChild(nouvdiv4);
 
	compteur_rangee++;
 
}
 
</script>
<body>
 
<div id="contenu_css">
	<div id="petit_contenu_css">
	<div id="conteneur">
	<div id="titre_h2"><h2>Administration</h2> > <h3>Reportages</h3></div>
	<?php 
                if (isset($_GET["action"])) {
                        switch ($_GET["action"]) { 
                                                                        
                        default : ; break;
                                                                                
                        case "nouveau" : ?>
 
			<form method="post" name="nouv_report" action="" enctype="multipart/form-data">
			<table id="form_report">
				<tr>
					<td valign="top">Date</td><td valign="top"><input type="text" name="titre" size="20" /></td>
				</tr>
				<tr>
					<td valign="top">Commentaire</td><td valign="top"><textarea name="commentaire" cols="40" rows="6"></textarea></td>
				</tr>
			</table>
			<p>Photo principale : </p>
			<div id="photo_p" onclick="suppr_image(this);"></div>
			<p>Rangée de photos n° 1 : </p>
			<div id="conteneur_rangees">
				<div id="rangee1" class="rangee_photos">
					<div class="photo_rangee" id="photo_1" onClick="suppr_image(this);"></div>
					<div class="photo_rangee col1" id="photo_2" onClick="suppr_image(this);"></div>
					<div class="photo_rangee col1" id="photo_3" onClick="suppr_image(this);"></div>
					<div class="photo_rangee col1" id="photo_4" onClick="suppr_image(this);"></div>
 
 
				</div>
			</div>
			<br />
			<div id="ajout"><a href="#" onClick="add_rangee();">Ajouter une rangée supplémentaire</a></div>
 
			<p><input type="submit" value="Enregistrer"></p>
			</form>
 
		<?php   ;
                }
        }
        else { ?>
		<p><a href="adminsite08_reportages.php?action=nouveau">Créer un nouveau reportage</a></p>
		<div id="liste_reportages"><p>Modifier un reportage existant :</p>
		<?php 
                        include_once('classes/Parse.class.php');
                        $parse = new Parse("txt-html");
                        echo $parse->liste_reportages(0,"colonnes");
        }
        ?>
		</div>
	</div>
	</div>
	</div>
 
</body>
</html>