Discussion :

[lmeylan]

Bonjour,

Mon objectif: pouvoir positionner des images en superposition d'autres !

je me creuse la tête depuis pas mal de temps pour comprendre pourquoi Firefox n'affiche pas correctement la page lors du premier chargement de la page, mais par contre l'affiche correctement lorsque l'on la réactualise !
Le problème revient si on vide le cache.
Cela marche bien avec Internet Explorer !

Voici mon code :

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
<script language="Javascript" TYPE="text/javascript">
// position des réalisations, 
function getOffsets(obj) {
    var offsetTop = obj.offsetTop;
    var offsetLeft = obj.offsetLeft;
    while ((obj = obj.offsetParent )!=null) {
        offsetTop += obj.offsetTop;
        offsetLeft += obj.offsetLeft;
    	}
    return [offsetTop,offsetLeft];
}
 </script>
<img id="my_map_v" src="ly_carte2.jpg"  style="border-width: 0px 0 0 0;">
 
<div id="my_map"><img src="reglyon.jpg"  style="border-width: 0px 0 0 0"></div>
<script language="Javascript" TYPE="text/javascript">
var obj1 =document.getElementById("my_map");
var top_map = getOffsets (obj1)[0];
var left_map = getOffsets (obj1)[1]; 
 
// position des réalisations, couleurs corrspondantes et image associée 
document.write("<div style=\"position:absolute;top:"+top_map+"px;left:" + left_map +"px;\">");
document.write("<img name=\"Fond1\" src=\"reglyon.gif\" WIDTH=\"662px\" height=\"576px\" border=\"0\">" );
document.write("</div>");
</script>

[SpaceFrog]

document.write

[lmeylan]

belu je suis, et je ne comprends pas le sens de la réponse ci-dessus.

Oui, je fais bien usage de "document.write()" ...

[SpaceFrog]

document.write a une facheuse tendance a être instable et a détruire ce qui existe sur la page ...
passe plutot par le DOM
document.createElement ...

[lmeylan]

J'ai procédé au changement et ai exactement le même effet.

Il peut être constaté sur :
http://www.art-et-histoire.com/tempo.html
--> chargez la page --> le graphe n'est pas aligné avec le fond
--> actualisez --> les deux s'alignent
--> effacez votre cache --> désalignement

mon code modifié :

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
 
<script language="Javascript" TYPE="text/javascript">
// position des réalisations, 
function getOffsets(obj) {
    var offsetTop = obj.offsetTop;
    var offsetLeft = obj.offsetLeft;
    while ((obj = obj.offsetParent )!=null) {
        offsetTop += obj.offsetTop;
        offsetLeft += obj.offsetLeft;
    	}
    return [offsetTop,offsetLeft];
}
 
var first_img    = document.createElement("img");
	with(first_img){
		src		= "ly_carte2.jpg";
		style.borderWidth	= "0px 0 0 0";
	}
document.body.appendChild(first_img);
</script>
 
<br>
 
<script language="Javascript" TYPE="text/javascript">
var scd_img    = document.createElement("img");
	with(scd_img){
		src		= "reglyon.jpg"; 
		id 		= "my_map"
		style.borderWidth	= "0px 0 0 0";
	}
document.body.appendChild(scd_img);
 
var obj1 =document.getElementById("my_map");
var top_map = getOffsets (obj1)[0];
var left_map = getOffsets (obj1)[1]; 
// super position des détails 
var detail    = document.createElement("img");
 
	with(detail){
		src		= "reglyon.gif";
		style.position	= "absolute";
	 	style.top		= top_map+"px";
	  	style.left		= left_map+"px";
		style.borderWidth	= "0px 0 0 0";
	}
 
document.body.appendChild(detail);
</script>

Je ne vois toujours pas ce qui cloche ...

Merci à tout sorcier de me prêter sa baguette magique

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var top_map = getOffsets (obj1)[0] +"px";
var left_map = getOffsets (obj1)[1] +"px";