menu déroulant tableau

**tsuka** · 06/05/2011, 05h15

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

)

**insane1** · 06/05/2011, 09h39

Pour moi un menu déroulant se fait plutot avec des ul > li et du css.

**Vil'Coyote** · 06/05/2011, 10h05

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

**tsuka** · 06/05/2011, 10h22

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 .

**tsuka** · 06/05/2011, 10h52

Voilà l'intitulé exact de l'exercice et l'apparence qu'il doit prendre

**insane1** · 06/05/2011, 12h03

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 )

**Bovino** · 06/05/2011, 12h14

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 !

**tsuka** · 06/05/2011, 12h54

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 :

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

**tsuka** · 06/05/2011, 12h55

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

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

**tsuka** · 06/05/2011, 13h18

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 :

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

**insane1** · 06/05/2011, 14h21

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

Je voulais dire sans faire de fonction js...

**insane1** · 06/05/2011, 14h45

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 :

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

**tsuka** · 06/05/2011, 15h12

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

**tsuka** · 06/05/2011, 15h16

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

**insane1** · 06/05/2011, 15h18

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 :

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

**tsuka** · 06/05/2011, 15h21

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?

**insane1** · 06/05/2011, 15h22

Là il faudra passer par du css, trouver une taille convenable à tes images et les retailler en conséquence.

**Bovino** · 06/05/2011, 15h23

je prépare mon exam pour la semaine prochaine

Ben à mon avis, c'est pas gagné

**tsuka** · 06/05/2011, 15h28

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

**insane1** · 06/05/2011, 15h33

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

Bon courage pour ton exam.

menu déroulant tableau [HTML 4.0]

HTML

Discussions similaires

Partager

Partager