Positionnement des calques

**kodo** · 16/08/2007, 13h14

Bonjour tout le monde,
Dans mon exemple suivant j'essai d'afficher des calques (des div) en fonction de la valeur de mon select :

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
 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
	function afficheCalques(f){
		if(f==1){
			document.getElementById('c1').style.visibility='visible';
			document.getElementById('c2').style.visibility='hidden';
			document.getElementById('c3').style.visibility='hidden';
		}else if(f==2){
			document.getElementById('c2').style.visibility='visible';
			document.getElementById('c1').style.visibility='hidden';
			document.getElementById('c3').style.visibility='hidden';
		}else if(f==3){
			document.getElementById('c3').style.visibility='visible';
			document.getElementById('c1').style.visibility='hidden';
			document.getElementById('c2').style.visibility='hidden';
		}
	}
</script>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
  <label>test :
  <select name="select" onchange="afficheCalques(this.value)">
    <option value="0">..........</option>
    <option value="1">rrr</option>
    <option value="2">fff</option>
    <option value="3">ggg</option>
  </select>
  </label>
  <p>
  	<div id="c1" style="LEFT:40px; TOP:40px;visibility:hidden">
		calque 1 : <input name="t1" type="text" />
	</div>
  	<div id="c2" style="LEFT:40px; TOP:40px;visibility:hidden">
		calque 2 : <input name="t2" type="text" />
	</div>
  	<div id="c3" style="LEFT:40px; TOP:40px;visibility:hidden">
		calque 3 : <input name="t3" type="text" />
	</div>
  </p>
</form>
</body>
</html>

tout marche bien sauf le positionnement de mes calques, malgré que j'ai donné les mêmes valeurs top et left, mes calques ne s'affiche pas dans la même position.

autre chose, est ce que ça peut me poser des problèmes lors du submit de mon formulaire?

et merci d'avance de votre aide.

**gKsam** · 16/08/2007, 14h12

Pour placer un calque où l'on veut dans une page il faut qu'il soit en position 'absolute'.

du coups :

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
<html>
<head>
<title>Test</title>
	<style type="text/css">
 
		div.calque {
			border: 1px solid black;
			position: absolute;
			visibility: hidden;
			top: 40px;
			left: 40px
		}
 
	</style>
<script type="text/javascript">
	function afficheCalques(f){
		if(f==1){
			document.getElementById('c1').style.visibility='visible';
			document.getElementById('c2').style.visibility='hidden';
			document.getElementById('c3').style.visibility='hidden';
		}else if(f==2){
			document.getElementById('c2').style.visibility='visible';
			document.getElementById('c1').style.visibility='hidden';
			document.getElementById('c3').style.visibility='hidden';
		}else if(f==3){
			document.getElementById('c3').style.visibility='visible';
			document.getElementById('c1').style.visibility='hidden';
			document.getElementById('c2').style.visibility='hidden';
		}
	}
</script>
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
  <label>test :
  <select name="select" onchange="afficheCalques(this.value)">
    <option value="0">..........</option>
    <option value="1">rrr</option>
    <option value="2">fff</option>
    <option value="3">ggg</option>
  </select>
  </label>
  	<div id="c1" class="calque">
		calque 1 : <input name="t1" type="text" />
	</div>
  	<div id="c2" class="calque">
		calque 2 : <input name="t2" type="text" />
	</div>
  	<div id="c3" class="calque">
		calque 3 : <input name="t3" type="text" />
	</div>
</form>
</body>
</html>

autre chose, est ce que ça peut me poser des problèmes lors du submit de mon formulaire?

Non cela ne pose pas de problème car les 3 'input type=text' seront envoyés. A toi, côté serveur, de récupérer les valeurs et de savoir laquelle a été choisie.

**kodo** · 16/08/2007, 14h18

Merci bien gKsam.

Positionnement des calques

JavaScript

Vue hybride

Discussions similaires

Partager

Partager