Affichage d'une div cachée en cliquant sur un lien

Version imprimable

12/03/2009, 18h21
anas.bah

Affichage d'une div cachée en cliquant sur un lien

bonjour

j'ai un probleme d'affichage avec firefox j'ai une balise div cache sur mon html qaund je clik sur un lien il s'affiche dans ie contrairement sur firefox . d'ou de vien le probleme ???
12/03/2009, 18h25
Alt157

Bonjour,

Je pense qu'avec un petit bout de code en plus on pourra plus facilement t'aider....

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
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
140
141
142
143
144
145
146
147
148
149
150
151
 
<html>
<head>
<title>popup</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script language="javascript" type="text/javascript" src="js/script.js" ></script>
 
</head>
 
<script language="javascript" type="text/javascript">
<!--preloading('images/');-->
function cache()
{
document.getElementById('pop').style.display = 'none';
}
function move(obj)
{
document.getElementById('pop').style.left = document.getElementById('test').value-170;
document.getElementById('pop').style.top = document.getElementById('test1').value;
charger(document.getElementById('b1'));
document.getElementById('pop').style.display = '';
}
 
</script>
<body bgcolor="#FFFFFF" >
<div align="center">
  <SCRIPT language=javascript>
function mouseMove (evt) {
var x=0; var y=0;
if (document.layers) {
x=evt.x; y=evt.y;
}
if (document.all) {
x=event.clientX; y=event.clientY;
} else {
if (document.getElementById) {
x=evt.clientX; y=evt.clientY;
}
}
window.test.value = x; 
window.test1.value = y; 
 
}
if (document.layers)
document.captureEvents(Event.MOUSEMOVE);
if (document.layers || document.all)
document.onmousemove = mouseMove;
if (document.addEventListener)
document.addEventListener('mousemove', mouseMove, true);
  </SCRIPT> 
 
 
Ibi victu recreati et quiete, postquam abierat timor, vicos opulentos adorti equestrium adventu cohortium, quae casu propinquabant, nec resistere planitie porrecta <a href="#" onClick="move()">teste</a>conati digressi sunt retroque concedentes omne iuventutis robur relictum in sedibus acciverunt.
 
Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat.<a href="#" onClick="move()">teste</a> erat autem quod cogitabat huius modi.
 
Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.
 
Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.
 
Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.
 
<a href="#" onClick="move()">teste</a>
<input type="hidden" name="test" size="20" Value="">
<input type="hidden" name="test1" size="20" Value="">
</div>
<div style="position:absolute; display:'none';" id="pop">
<div align="center">
  <!-- ImageReady Slices (popup) -->
<div style="background-color:#4badbb; height:207px; width:1px; float:left; padding-top:10px; margin-top:10px; margin-right:0px; padding-right:0px; margin-left:0px; position:absolute;">
</div>
</div>
<div>
	<div align="center">
	  <table id="Tableau_01" width="359" height="212" border="0" cellpadding="0" cellspacing="0">
	    <tr>
	      <td colspan="6" align="center"><img src="images/point.gif" width="15" height="10" alt="" ></td>
	</tr>
	    <tr>
	      <td colspan="5" style="background-color:#4badbb">
	        <p class="entete">changes – EUR/USD</p></td>
		  <td class="curseur">
		    <img src="images/popup_02.gif" width="16" height="16" alt="" onClick="cache();//fermer()"></td>
		  <td rowspan="9">
		    <img src="images/popup_03.gif" width="8" height="211" alt=""></td>
	  </tr>
	    <tr>
	      <td  id="b1" class="bt1" onClick="charger(this);">
          J-7 </td>
		  <td id="b2" class="bt2" onClick="charger(this);">
		    1 mois</td>
 
		<td id="b3" class="bt2" onClick="charger(this);">
		  2 mois</td>
		  <td id="b4" class="bt2" onClick="charger(this);">
		    1 an</td>
		  <td id="b5" colspan="2"class="bt2" onClick="charger(this);">
		    2 ans</td>
	  </tr>
	    <tr id="img" style="display:''">
	      <td colspan="6">
	        <img  src="images/graphe.gif" width="351" height="165" alt=""></td>
	  </tr>
	    <tr id="img2" style="display:'none'">
	      <td colspan="6">
	        <img  src="images/graphe2.gif" width="351" height="165" alt=""></td>
	  </tr>
	    <tr id="img3" style="display:'none'">
	      <td colspan="6">
	        <img  src="images/graphe3.gif" width="351" height="165" alt=""></td>
	  </tr>
	    <tr id="img4" style="display:'none'">
	      <td colspan="6">
	        <img  src="images/graphe4.gif" width="351" height="165" alt=""></td>
	  </tr>
	    <tr id="img5" style="display:'none'">
	      <td colspan="6">
	        <img  src="images/graphe3.gif" width="351" height="165" alt=""></td>
	  </tr>
	    <tr>
	      <td colspan="6">
	        <img src="images/popup_10.gif" width="351" height="6" alt=""></td>
	  </tr>
	    <tr>
	      <td>
	        <img src="images/spacer.gif" width="70" height="1" alt=""></td>
		  <td>
		    <img src="images/spacer.gif" width="70" height="1" alt=""></td>
		  <td>
		    <img src="images/spacer.gif" width="70" height="1" alt=""></td>
		  <td>
		    <img src="images/spacer.gif" width="70" height="1" alt=""></td>
		  <td>
		    <img src="images/spacer.gif" width="55" height="1" alt=""></td>
		  <td>
		    <img src="images/spacer.gif" width="16" height="1" alt=""></td>
		  <td>
		    <img src="images/spacer.gif" width="8" height="1" alt=""></td>
	  </tr>
      </table>
    </div>
</div>
 
<div align="center">
  <!-- End ImageReady Slices -->
</div>
</div>
</body>
 
</html>

Re bonsoir,

Je t'ai mis en gras des modifications effectués :

Tu utilisais dans ton javascript par exemple :

document.getElementById('test1').value alors qu'aucun ID n était défini a cet input.

De plus tu utilisais :

window.test.value = x; que j'ai remplacé par document.getElementById('test1').value

Pour finir, tu assignais un top de cette manière : document.getElementById('pop').style.top = document.getElementById('test1').value; .Tu modifies ton css, en javascript certes, mais tu modifies tout de même ton css donc il faut préciser que c'est du pixel.

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
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>popup</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="style/style.css" />
	<script type="text/javascript" src="js/script.js" ></script> 
<script type="text/javascript">
<!--preloading('images/');-->
function cache()
{
	document.getElementById('pop').style.display = 'none';
}
function move(obj)
{
	document.getElementById('pop').style.left = document.getElementById('test').value-170 + 'px';
	document.getElementById('pop').style.marginTop = document.getElementById('test1').value -170 + 'px';
	charger(document.getElementById('b1'));
	document.getElementById('pop').style.display = 'block';
}
function mouseMove (evt) 
{
var x=0; var y=0;
if (document.layers) {
x=evt.x; y=evt.y;
}
if (document.all) {
x=event.clientX; y=event.clientY;
} else {
if (document.getElementById) {
x=evt.clientX; y=evt.clientY;
}
}
document.getElementById('test').value = x; 
document.getElementById('test1').value = y; 
 
}
if (document.layers)
document.captureEvents(Event.MOUSEMOVE);
if (document.layers || document.all)
document.onmousemove = mouseMove;
if (document.addEventListener)
document.addEventListener('mousemove', mouseMove, true);
  </script> 
 </head>
<body bgcolor="#FFFFFF" >
	<div align="center">
	  Ibi victu recreati et quiete, postquam abierat timor, vicos opulentos adorti equestrium adventu cohortium, quae casu propinquabant, nec resistere planitie porrecta <a href="javascript:void(0);" onclick="move()">teste</a>conati digressi sunt retroque concedentes omne iuventutis robur relictum in sedibus acciverunt.
	 
		Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat.<a href="javascript:void(0);" onclick="move()">teste</a> erat autem quod cogitabat huius modi.
		 
		Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.
		 
		Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.
		 
		Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

		<a href="javascript:void(0);" onclick="move()">teste</a>
		<input type="hidden" id="test" name="test" size="20" value="" />
		<input type="hidden" id="test1" name="test1" size="20" value="" />
	</div>
	<div style="position:absolute; display:'none';" id="pop">
		<div align="center">
			<!-- ImageReady Slices (popup) -->
			<div style="background-color:#4badbb; height:207px; width:1px; float:left; padding-top:10px; margin-top:10px; margin-right:0px; padding-right:0px; margin-left:0px; position:absolute;">
			</div>
		</div>
		<div>
		<div align="center">
		<table id="Tableau_01" width="359" height="212" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td colspan="6" align="center">
					<img src="images/point.gif" width="15" height="10" alt="" />
				</td>
			</tr>
		    <tr>
				<td colspan="5" style="background-color:#4badbb">
					<p class="entete">changes – EUR/USD</p>
				</td>
				<td class="curseur">
					<img src="images/popup_02.gif" width="16" height="16" alt="" onclick="cache();//fermer()" />
				</td>
				<td rowspan="9">
					<img src="images/popup_03.gif" width="8" height="211" alt="" />
				</td>
			</tr>
		    <tr>
				<td  id="b1" class="bt1" onclick="charger(this);" >
					J-7 
				</td>
				<td id="b2" class="bt2" onclick="charger(this);">
					1 mois
				</td>			 
				<td id="b3" class="bt2" onclick="charger(this);">
					2 mois
				</td>
				<td id="b4" class="bt2" onclick="charger(this);">
				    1 an
				</td>
				<td id="b5" colspan="2"class="bt2" onclick="charger(this);">
				    2 ans
				</td>
			</tr>
		    <tr id="img" style="display:''">
				<td colspan="6">
					<img  src="images/graphe.gif" width="351" height="165" alt="" />
				</td>
			</tr>
		    <tr id="img2" style="display:'none'">
				<td colspan="6">
					<img  src="images/graphe2.gif" width="351" height="165" alt="" />
				</td>
			</tr>
		    <tr id="img3" style="display:'none'">
				<td colspan="6">
					<img  src="images/graphe3.gif" width="351" height="165" alt="" />
				</td>
			</tr>
		    <tr id="img4" style="display:'none'">
				<td colspan="6">
					<img  src="images/graphe4.gif" width="351" height="165" alt="" />
				</td>
			</tr>
		    <tr id="img5" style="display:'none'">
				<td colspan="6">
					<img  src="images/graphe3.gif" width="351" height="165" alt="" />
				</td>
			</tr>
		    <tr>
				<td colspan="6">
					<img src="images/popup_10.gif" width="351" height="6" alt="" />
				</td>
			</tr>
		    <tr>
				<td>
					<img src="images/spacer.gif" width="70" height="1" alt="" />
				</td>
				<td>
					<img src="images/spacer.gif" width="70" height="1" alt="" />
				</td>
				<td>
					<img src="images/spacer.gif" width="70" height="1" alt="" />
				</td>
				<td>
					<img src="images/spacer.gif" width="70" height="1" alt="" />
				</td>
				<td>
					<img src="images/spacer.gif" width="55" height="1" alt="" />
				</td>
				<td>
					<img src="images/spacer.gif" width="16" height="1" alt="" />
				</td>
				<td>
					<img src="images/spacer.gif" width="8" height="1" alt="" />
				</td>
			</tr>
	    </table>
		</div>
	</div>
 
	<div align="center">
	  <!-- End ImageReady Slices -->
	</div>
</div>
</body>
 
</html>

J'espère que c'est cela que tu voulais

oui merci bcp

le probleme que j'arrive pas l' adapter avec mon code js et css.
tu peux m'aider stp

voici mon code js

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
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
// JavaScript Document
 
 
//-->
function fermer() {
	opener=self;
 
	self.close();
}
 
function charger(id)
{
switch(id.id) 
{
case "b1":
	//document.getElementById('img').style.display = 'none';
	document.getElementById("img5").style.display = "none";
	document.getElementById("img2").style.display = "none";
	document.getElementById("img3").style.display = "none";
	document.getElementById("img4").style.display = "none";
	document.getElementById("img").style.display = "";
	document.getElementById("b2").className = "bt2";
	document.getElementById("b3").className = "bt2";
	document.getElementById("b4").className = "bt2";
	document.getElementById("b5").className = "bt2";
	document.getElementById("b1").className = "bt1";
 
	break;
case "b2":
	//document.getElementById('img').style.display = 'none';
	//document.getElementById('img1').style.display = 'none';
	//document.getElementById('img2').style.display = 'none';
	//document.getElementById('img3').style.display = 'none';
	//document.getElementById('img4').style.display = 'none';
	//document.getElementById('img1').style.display = 'block';
	//document.getElementById('b1').className = 'bt2';
	//document.getElementById('b3').className = 'bt2';
	//document.getElementById('b4').className = 'bt2';
	//document.getElementById('b5').className = 'bt2';
	//document.getElementById('b2').className = 'bt1';
	document.getElementById("img").style.display = "none";
	document.getElementById("img5").style.display = "";
	//document.getElementById("img2").style.display = "";
	document.getElementById("img3").style.display = "none";
	document.getElementById("img4").style.display = "none";
	document.getElementById("img2").style.display = "none";
	document.getElementById("b2").className = "bt1";
	document.getElementById("b3").className = "bt2";
	document.getElementById("b4").className = "bt2";
	document.getElementById("b5").className = "bt2";
	document.getElementById("b1").className = "bt2";
	break;
case "b3":
	document.getElementById("img").style.display = "none";
	document.getElementById("img5").style.display = "none";
	//document.getElementById("img2").style.display = "none";
	document.getElementById("img3").style.display = "none";
	document.getElementById("img4").style.display = "none";
	document.getElementById("img2").style.display = "";
	document.getElementById("b2").className = "bt2";
	document.getElementById("b3").className = "bt1";
	document.getElementById("b4").className = "bt2";
	document.getElementById("b5").className = "bt2";
	document.getElementById("b1").className = "bt2";
	break;
case "b4":
	document.getElementById("img").style.display = "none";
	document.getElementById("img5").style.display = "none";
	document.getElementById("img2").style.display = "none";
	//document.getElementById("img3").style.display = "none";
	document.getElementById("img4").style.display = "none";
	document.getElementById("img3").style.display = "";
	document.getElementById("b2").className = "bt2";
	document.getElementById("b3").className = "bt2";
	document.getElementById("b4").className = "bt1";
	document.getElementById("b5").className = "bt2";
	document.getElementById("b1").className = "bt2";
	break;
case "b5":
	document.getElementById("img").style.display = "none";
	document.getElementById("img5").style.display = "none";
	document.getElementById("img2").style.display = "none";
	document.getElementById("img3").style.display = "none";
	//document.getElementById("img4").style.display = "none";
	document.getElementById("img4").style.display = "";
	document.getElementById("b2").className = "bt2";
	document.getElementById("b3").className = "bt2";
	document.getElementById("b4").className = "bt2";
	document.getElementById("b5").className = "bt1";
	document.getElementById("b1").className = "bt2";
	break;
default :
	//document.getElementById("img").style.display = "none";
	document.getElementById("img1").style.display = "none";
	document.getElementById("img5").style.display = "none";
	document.getElementById("img3").style.display = "none";
	document.getElementById("img4").style.display = "none";
	document.getElementById("img").style.display = "";
	//document.getElementById("img").style.display = "block";
	document.getElementById("b2").className = "bt2";
	document.getElementById("b3").className = "bt2";
	document.getElementById("b4").className = "bt2";
	document.getElementById("b5").className = "bt2";
	document.getElementById("b1").className = "bt1";
	break;
}
}
 
function preloading(url) 
{ 
 
var xhr=createXHR();**  
xhr.onreadystatechange=function() 
{  
if(xhr.readyState == 4) 
{ 
var content = xhr.responseText; 
//alert(xhr.responseText); 
var i = new Image(); 
i.src = content; 
}  
};  
xhr.open("GET", url , true); 
 
xhr.send(null);  
} 
 
function ouvrir(l,h,url) { 
hauteur=Math.round((screen.availHeight-h)/2); 
largeur=Math.round((screen.availWidth-l)/2); 
 
window.open(url, "site", "toolbar=0,location=0,directories=0,status=0, scrollbars=0,resizable=0,titlebar=0,menubar=0,top="+hauteur+",left="+largeur+",width="+l+",height="+h); 
}

et mon css

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
 
/* CSS Document */
.entete{
font:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
color:#FFFFFF;
}
 
.bt1{
background-image:url(../images/popup_04.gif);
font:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold ;
text-align:center;
color:#000303;
height:25px;
cursor: pointer;
cursor: hand;
}
.bt2{
background-image:url(../images/popup_05.gif);
font:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-align:center;
color:#000303;
height:25px;
cursor: pointer;
cursor: hand;
}
.curseur {
	cursor: pointer;
	cursor: hand;
}
body {
	margin-left: 50px;
	margin-right: 50px;
}