menu déroulant tableau

Version imprimable

06/05/2011, 05h15
tsuka

menu déroulant tableau

Bonjour à tous :)
Depuis un moment je me casse la tête pour réussir à faire un menu déroulant 3 tableaux, l'intitulé exacte est :
écrivez une page html permettant de générer 3 tableaux pour des dimensions choisies par l'utilisateur dans un menu déroulant ( 3x3, 3x4 et 4x5 )
On doit enfaite avoir un tableau avec 1 même image en 3x3, l'autre avec la même image en 3x4 ... bref

Je sais comment faire le tableau j'utilise <td> <tr> et j'inclue l'image avec src . pour le menu déroulant il me semble que l'on utilise select => option
je voulais juste savoir comment procéder . Sachant que j'ai déjà mes tableaux .
Merci beaucoup d'avance :) ( je prépare mon exam pour la semaine prochaine, c'est un exercice dans les annales :cry: )
06/05/2011, 09h39
insane1

Pour moi un menu déroulant se fait plutot avec des ul > li et du css.
06/05/2011, 10h05
Vil'Coyote

je vais reprendre la même que insane1.

tu veux faire une liste déroulante ou un menu déroulant.
car l'un est à base de <select><option</option></select>
et l'autre à base de <ul> <il> et + css
06/05/2011, 10h22
tsuka

Bonjour,
Je ne sais pas quel est la différence, nous avons toujours utiliser avec la form " select' c'est pour ça :)
Dans l'intitulé exact il dise " menu déroulant" mais le prof a toujours utiliser des "select" pour ceci .
06/05/2011, 10h52
tsuka

1 pièce(s) jointe(s)

Voilà l'intitulé exact de l'exercice et l'apparence qu'il doit prendre :)
06/05/2011, 12h03
insane1

Oui c'est donc bien une liste déroulante.

Tu peux utiliser du javascript pour actualiser ton tableau en fonction de ce que tu choisi dans la liste déroulante.
Ou sinon si tu ne veux pas de js, soumet un formulaire lors du changement de ta liste déroulante ( attribut onchange )
06/05/2011, 12h14
Bovino

Citation:

Envoyé par insane1

Ou sinon si tu ne veux pas de js, soumet un formulaire lors du changement de ta liste déroulante ( attribut onchange )

Ah ben oui, utiliser l'attribut onchange pour éviter le JavaScript, fallait y penser ! :mouarf:

:dehors:

Ok merci, mais je ne sais pas comment faire du javascrpit pour les tableau je comprend rien .
Sans faire de javascipt j'avais fais :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
 
<tr>    <td background ="img src=dos.png">
	<img src="dos.png">
	<img src="dos.png">
        <img src="dos.png">
        </td>
</tr>
<tr>    <td background ="img src=dos.png">
	<img src="dos.png">
	<img src="dos.png">
        <img src="dos.png">
        </td>
</tr>
 
 
</table>

a la base j'avais fais ça ( c'est très moche je sais ... )

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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
 
    <style type="text/css">
     .test{position: absolute; top:20%; left: 20px; color: blue; font-size: x-large;}>
     
    </style>
 
</head>
 
 
 
<body>
 
 
<script>
function savoir(){
var indice=document.pige.compris.selectedIndex;
var chango=document.pige.compris.options[indice].value: switch(chango){
case"na":document.pige="????? pour se retrouver avec un tableau d'une otre dimension???   ;breack;
}
}
</script>
 
 
<form name="pige">
<select name="compris" onchange="savoir()">
<option value="ni">3*3</option>
<option value="na">2*3</option>
<option value="ne">4*3</option>
</select>
 
 
<table name="3*3">
 
<tr>    <td background ="img src=dos.png">
	<img src="dos.png">
	<img src="dos.png">
        <img src="dos.png">
        </td>
</tr>
<tr>    <td background ="img src=dos.png">
	<img src="dos.png">
	<img src="dos.png">
        <img src="dos.png">
        </td>
</tr>
 
 
</table>
 
 
 
 
 <div class=test>
 
 
Test
</div>
 
 
 
 
 
 
 
 
</body>
</html>

j'ai fais comme ceci : mais ça ne marche pas , j'ai seulement ma liste déroulante et le valider . les tableaux de s'affiche pas !

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
<html>
<script type="text/javascript">
//<![CDATA[
 
function affiche_tab() {
... var nom_de_ton_tab=new Array(100,100);
for(i=0;i<100;i++){
for(i=j=0;j<100;j++){
nom_de_ton_tab[i,j]=new Image(50,50);
nom_de_ton_tab[i,j].src="nom_image.jpeg";
}
}
switch(document.choix.value){
case "1":
document.write('<table>
<tr><td>nom_de_ton_tab[0][0]</td><td>nom_de_ton_tab[0][1]<td>nom_de_ton_tab[0][2]</td></tr>
<tr><td>nom_de_ton_tab[1][0]</td><td>nom_de_ton_tab[1][1]</td><td>nom_de_ton_tab[1][2]</td></tr>
<tr><td>nom_de_ton_tab[2][0]</td><td>nom_de_ton_tab[2][1]</td><td>nom_de_ton_tab[2][2]</td></tr>
</table>');
break;
case "2":document.write('<table>
<tr><td>nom_de_ton_tab[0][0]</td><td>nom_de_ton_tab[0][1]</td><td>nom_de_ton_tab[0][2]</td></tr>
<tr><td>nom_de_ton_tab[1][0]</td><td>nom_de_ton_tab[1][1]</td><td>nom_de_ton_tab[1][2]</td></tr>
<tr><td>nom_de_ton_tab[2][0]</td><td>nom_de_ton_tab[2][1]</td><td>nom_de_ton_tab[2][2]</td></tr>
<tr><td>nom_de_ton_tab[3][0]</td><td>nom_de_ton_tab[3][1]</td><td>nom_de_ton_tab[3][2]</td></tr>
</table>');
break;
case "3":
document.write('<table>
<tr><td>nom_de_ton_tab[0][0]</td><td>nom_de_ton_tab[0][1]</td><td>nom_de_ton_tab[0][2]</td><td>nom_de_ton_tab[0][3]</td></tr>
<tr><td>nom_de_ton_tab[1][0]</td><td>nom_de_ton_tab[1][1]</td><td>nom_de_ton_tab[1][2]</td><td>nom_de_ton_tab[1][3]</td></tr>
<tr><td>nom_de_ton_tab[2][0]</td><td>nom_de_ton_tab[2][1]</td><td>nom_de_ton_tab[2][2]</td><td>nom_de_ton_tab[2][3]</td></tr>
</table>');
break;
 
//.............(suite)
}
}
 
//]]>
</script>
 
<form method='POST'>
<select name='choix'>
<option value='1'> 3X3 </option>
<option value='2'> 3X4 </option>
<option value='3'> 4X3 </option>
//........(suite)
</select>
<input type='submit' value='valider' onclick="affiche_tab()"/>
</form>
</html>

06/05/2011, 14h21
insane1

Citation:

Ah ben oui, utiliser l'attribut onchange pour éviter le JavaScript, fallait y penser !

Je voulais dire sans faire de fonction js...

Voici un code qui fait ce que tu souhaites.
J'ai repris celui que tu as fourni et je l'ai modifié (c'est codé en dur mais tu peux changer cela facilement pour le rendre plus générique )

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
<html>
<script type="text/javascript">
//<![CDATA[
 
function affiche_tab() {
var lediv = document.getElementById('emplacementTableau');
var choix = document.getElementById('choix');
switch(choix.value){
case "1":
lediv.innerHTML = '<table><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr></table>';
break;
case "2":
lediv.innerHTML = '<table><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr></table>';
break;
case "3":
lediv.innerHTML = '<table><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr></table>';
break;
 
}
}
 
//]]>
</script>
 
<select id="choix" name='choix'>
<option value='1'> 3X3 </option>
<option value='2'> 3X4 </option>
<option value='3'> 4X3 </option>
</select>
<input type='button' value='valider' onclick="affiche_tab()"/>
<div id="emplacementTableau">
</div>
</html>

06/05/2011, 15h12
tsuka

Mon Sauveur :)

Merci beaucoup,
un dernier problème , j'ai donc mis une image test.png cependant lorsque je clique sur le lien , il me met à la place des images, une icone comme s'il ne trouvais pas le chemin pour trouver l'image
06/05/2011, 15h16
tsuka

AAA désolé mille fois ^^ mes images sont en png et j'avais mis jpg.
Je vous remercie pour votre aide :) :ccool:

C'est qu'il n'arrive pas à trouver l'image donc que le chemin n'est pas bon.
Pour que ca fonctionne tel quel, ton image doit être au même niveau que le fichier html.

Sinon voici une version plus générique qui permet à l'utilisateur de choisir le nombre de ligne et de colonnes voulues.

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
<html>
<script type="text/javascript">
//<![CDATA[
 
function affiche_tab() {
var lediv = document.getElementById('emplacementTableau');
var choix = document.getElementById('choix');
switch(choix.value){
case "1":
lediv.innerHTML = '<table><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr></table>';
break;
case "2":
lediv.innerHTML = '<table><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr></table>';
break;
case "3":
lediv.innerHTML = '<table><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr><tr><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td><td><img src="test.jpg"/></td></tr></table>';
break;
 
}
}
 
function affiche_tab2(){
        var lediv = document.getElementById('emplacementTableau');
        var ligne = document.getElementById('ligne');
        var colonne = document.getElementById('colonne');
        var i = 0;
        var j = 0;
        var inner = "";
        inner = '<table>';
        for(i=0; i<ligne.value; i++){
                inner = inner+'<tr>';
                for(j=0; j<colonne.value; j++) {
                        inner = inner+'<td><img src="test.jpg"/></td>';
                }
                inner = inner+'</tr>';
        }
        inner = inner+'</table>';
        lediv.innerHTML = inner;
}
 
//]]>
</script>
 
<select id="choix" name='choix'>
<option value='1'> 3X3 </option>
<option value='2'> 3X4 </option>
<option value='3'> 4X3 </option>
</select>
<input type='button' value='valider' onclick="affiche_tab()"/>
Ligne : 
<select id="ligne" name='ligne'>
<option value='1'> 1 </option>
<option value='2'> 2 </option>
<option value='3'> 3 </option>
<option value='4'> 4 </option>
<option value='5'> 5 </option>
</select>
Colonne : 
<select id="colonne" name='colonne'>
<option value='1'> 1 </option>
<option value='2'> 2 </option>
<option value='3'> 3 </option>
<option value='4'> 4 </option>
<option value='5'> 5 </option>
</select>
<input type='button' value='valider2' onclick="affiche_tab2()"/>
 
<div id="emplacementTableau">
</div>
</html>

06/05/2011, 15h21
tsuka

Merci :)
Je voulais aussi savoir, comment fais t'on pour ajuster image/tableau .... à la fenêtre, car par exemple là, mes images sont trop grande, du coup l'utilisateur donc bouger la molette pour tous voir .
Comment fais t'on pour ajuster la fenêtre sil vous plait?
06/05/2011, 15h22
insane1

Là il faudra passer par du css, trouver une taille convenable à tes images et les retailler en conséquence.
06/05/2011, 15h23
Bovino

Citation:

je prépare mon exam pour la semaine prochaine

Ben à mon avis, c'est pas gagné :roll:
06/05/2011, 15h28
tsuka

et bin merci, ça m'encourage fortement ^^
Non, mais je suis en première année, le truc le plus compliquer c'est ceci .
Je sais que pour vous, c'est une chose très très facil ^^
Mais bon j'ai pas que cette matière ^^ ( j'avoue c'est celle ou j'ai franchement du mal... vive les maths ! ) je vais me faire taper :P
06/05/2011, 15h33
insane1

Si ton problème est résolu n'oublie pas de le taguer comme tel.

Bon courage pour ton exam.