Bonjour à tous et bonne année !

J'ai un probleme sur une succession de code javascript, et peut être que certains d'entres vous peuvent m'aider.


J'explique, je tente de faire un dev du style PostIt en php/Xajax, et je me confronte à un probleme de javascript.
Ce probleme n'est pas du à Xajax car je l'ai reproduit sans les fonctions Xajax.

En fait, lorsque je change la visibility de certains éléments, le perds aussi l'attribut 'position:Absolute'

Le probleme, c'est que tout est ok en IE et que rien ne va plus en FF (2.0.0.1).

voici le code (j'y ai eppuré Xajax & le code HTML inutile) :
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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!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" xml:lang="fr" >
        <head>
                <title>TEST</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
				<script type="text/javascript" >
				/*
	Réalisé par oli.
	<a href="http://blog.oli-web.com" target="_blank">http://blog.oli-web.com</a>
*/
 
var isDragging = false;
var objectToDrag;
var obj;
var ecartX;
var ecartY;
var curX;
var curY;
 
function positionne(p_id, p_posX, p_pos_Y){
	document.getElementById(p_id).style.left = p_posX;
	document.getElementById(p_id).style.top = p_pos_Y;
}
 
function getPositionCurseur(e){
	//ie
	if(document.all){
		curX = event.clientX;
		curY = event.clientY;
	}
 
	//netscape 4
	if(document.layers){
		curX = e.pageX;
		curY = e.pageY;
	}
 
	//mozilla
	if(document.getElementById){
		curX = e.clientX;
		curY = e.clientY;
	}
}
 
function beginDrag(p_obj, e , p_size , width , height){
	isDragging = true;
	objectToDrag = p_obj;
 
	//Ajout pour SIZE
	if ( p_size )
	{
	objectToSize = p_size;
	objectToDragWidth = width-12;
	objectToDragHeight = height-12;
	}
	else
	{
		objectToSize = '';
	}
 
	getPositionCurseur(e);
	ecartX = curX - parseInt(objectToDrag.style.left);
	ecartY = curY - parseInt(objectToDrag.style.top);
}
 
function drag(e,p_size) {
	var newPosX;
	var newPosY;
	if(isDragging == true){
 
		getPositionCurseur(e);
		newPosX = curX - ecartX;
		newPosY = curY - ecartY;
		// AJOUT POUR SIZE
 
		if ( p_size ) 
		{
			newPosSizeX = newPosX + objectToDragWidth;
			newPosSizeY = newPosY + objectToDragHeight;
			objectToSize.style.left = newPosSizeX + 'px';
			objectToSize.style.top = newPosSizeY + 'px';
		}
 
 
		objectToDrag.style.left = newPosX + 'px';
		objectToDrag.style.top = newPosY + 'px';
 
	}
 
}
 
function endDrag(){
	isDragging = false;
}
				</script>
		</head>
        <body id=body>
				<hr>
 
<div id=stk9  style='position: absolute;background: White;width: 199px;height: 110px;'  onmousedown="beginDrag(this, event ,  size9, 199 , 110 );this.style.border='1px solid red';" onmousemove='drag(event, size9);' onmouseup='this.style.border="none";endDrag()'>
<div style='font-weight: bold;text-align: center;padding-top: 1px;border: 1px solid black;background: White;'>
<table cellpadding=0 cellspacing=0 width=100% border=0>
	<tr>
		<td align=center>
			TEST
			<img id=cache9 src='IMG/cache.gif' style='visibility:visible' onClick="
			montre9.setAttribute( 'style' , 'visibility:visible;');
			cache9.setAttribute( 'style' , 'visibility:hidden;');
			montre9.style.visibility='visible';
			cache9.style.visibility='hidden';
			cur_size = document.getElementById('size9');
			cur_size.setAttribute( 'style' , 'visibility:hidden;');
			size9.style.visibility='hidden';
			cur_stk = document.getElementById('stk9');
			cur_stk.setAttribute( 'style' , 'background:none;width: 199px;height: 110px;position:absolute;');
			cur_stk.style.background='none';
			cur_contenu = document.getElementById('contenu9');
			cur_contenu.setAttribute( 'style' , 'visibility:hidden;');
			cur_contenu.style.visibility='hidden';
			">
			<img id=montre9 src='IMG/montre.gif' style='visibility:hidden' onClick="
			montre9.setAttribute( 'STYLE' , 'visibility:hidden;');
			cache9.setAttribute( 'STYLE' , 'visibility:visible;');
			montre9.style.visibility='hidden';
			cache9.style.visibility='visible';
			document.getElementById(size9).setAttribute( 'STYLE' , 'visibility:visible;');
			size9.style.visibility='visible';
			document.getElementById(stk9).setAttribute( 'STYLE' , 'background:White;')
			stk9.style.background='White';
			contenu9.style.visibility='visible';
			document.getElementById(contenu9).setAttribute( 'STYLE' , 'visibility:visible;');
			">
		</td>
		<td align=right>
			<img src='IMG/delete.gif' >
			<img src='IMG/modification.gif' >
		</td>
	</tr>
</table>
</div>
<div id=contenu9  style='padding:5px;background: White;' style='visibility:visible'>
okok
</div>
 
</div>
<img style='position: absolute' style='visibility:visible' id=size9 src='IMG/size.gif'  onmouseover='this.style.width="20px"' onmouseout='this.style.width="16px"'  onmousedown='beginDrag(this,event);' onmousemove='drag(event);'  onmouseup='endDrag()'>
<script type="text/javascript">
	positionne('stk9', '903px', '290px');
	positionne('size9', '1089px', '387px');
	isDragging = false;
</script>
 
        </body>
</html>
Quand je clique sur l'image Cache.gif (id = cache9), ca cache bien ce que je veux, mais du coup je perds l'attribut Position.

Si QQun a une idée ou une experience, je luis en suis reconnaissant d'avance...


a +

SBD.