OffsetTop - comportement hératique sur Firefox

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 !

Il peut être constaté sur :
[ Lien ]
--> chargez la page --> le graphe n'est pas aligné avec le fond
--> actualisez --> les deux s'alignent
--> effacez votre cache --> nouveau désalignement

J'ai tenté de remplacer les document.write par du DOM pur, sur le conseil de SpaceFrog sur Developpez.com, mais cela ne change rien.

Voici mon code (simple):

Laurent
Passionné d'art et d'histoire

Bonjour,

    pas très bien compris ce que tu  cherches à faire ?

    mais (obj1)[1]   ? c'est quoi ?

    comme tu fais juste deavnt var obj1 =document.getElementById("my_map");
       il n'y en a qu'1, et ce n'est pas un array !

---

                Cordialement            Bul         [mon Site]     [M'écrire]

ça doit d'ailleurs t'afficher une erreur...

¡--------¡----------------------------------------------------------¡
|FireFox |regarder la "console d'erreurs"                           |
|        | Outils / Console d'erreurs                               |
|        |                            et mieux, télécharger FireBug |
|--------|----------------------------------------------------------|
|Internet|activer le deboggage : Outils/options Internet/Avancés    |
|Explorer| dans la liste, sous "Navigation" : décocher              |
|        | ° Afficher une notification de chaque erreur de script   |
|        | ° Désactiver le débogage de Scripts (Internet Explorer)  |
|        |                     et mieux, télécharger le Debogger IE |
|        |                     voir aussi  DebugBar et Companion JS |
|--------|----------------------------------------------------------|
|K-Meleon|regarder la "console d'erreurs"                           |
|        | Outils / Console d'erreurs                               |
|--------|----------------------------------------------------------|
|Opera   |regarder la "console d'erreurs"                           |
|        | Outils / Avancé / Console d'erreurs                      |
|--------|----------------------------------------------------------|
|Safari  |regarder Debug / Show JavaScript Console                  |
|        |modif Fichier "Support:\Documents and Settings\utilisateur|
|        |\Application Data\Apple Computer\Safari\Preferences.plist"|
|        |   y ajouter    <key>IncludeDebugMenu</key>               |
|        |                <true/>                                   |
!--------!----------------------------------------------------------!

et la taille / position des éléments : regarder ici par exemple ?

---

                Cordialement            Bul         [mon Site]     [M'écrire]

Merci pour la réponse spontanée

réponse à la première remarque (mon objectif):

Pour mieux comprendre clique sur ce lien.
Sur Firefox, tu devrais observer que le détail de la carte n'est pas aligné avec le fond (beige).
Mais si tu réactualise la page, ça marche !
Mon objectif --> que ça marche ds ts les cas ...
 
réponse à la deuxième remarque :
Ma fonction getOffsets(obj) retourne un array dont le premier élément est top et le deuxième est left.
Donc quand je récupère l'info, je fais : getOffsets (obj1)[0] pour avoir le "Top"

réponse à la troisième remarque :
la console d'erreur Mozilla ne relève aucune erreur, ni au chargement initial ni au rechargement.


Laurent
Passioné d'art et d'histoire

>>le détail de la carte n'est pas aligné
    ah...ok;
>>Mozilla ne relève aucune erreur
    bon uniquement un truc de positionnement , avec comportement
          IE et FF différent...

>>getOffsets(obj) retourne un array
    navré ! j'avais mal lu !  j'avais vu obj1[1]     
    houla... faut que j'aille au lit moi.

---

                Cordialement            Bul         [mon Site]     [M'écrire]

peux-tu essayer avec
 window.onload=function()
    {   var obj1 =document.getElementById("my_map");
         var top_map = getOffsets (obj1)[0];
         var left_map = getOffsets (obj1)[1];    ...

---

                Cordialement            Bul         [mon Site]     [M'écrire]

OK ça marche avec Windows.onload, mais l'exemple que j'ai soumis est ultra simplifié.
Sur mon site, j'ai pas loin d'un millier d'image à positionner (autant qu'il y a d'ouvrages sur une carte géographique)--> il faut que ça marche du premier coup.

Pour info voilà comment j'ai implementé la proposition avec windows.onload

<script language="Javascript" TYPE="text/javascript">
// position de la première image,
var first_img    = document.createElement("img");
    with(first_img){
        id         = "my_map1"
        src        = "ly_carte2.jpg";
        style.borderWidth    = "0px 0 0 0";
    }
document.body.appendChild(first_img);
</script>
 
<br>
 
<script language="Javascript" TYPE="text/javascript">
// position de la seconde image,
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);

// prpéparation de l'imageà superposer
var detail    = document.createElement("img");
 
    with(detail){
        src        = "reglyon.gif";
        id         = "my_detail"
        style.position    = "absolute";
         style.top        = "0px";
          style.left        = "0px";
        style.borderWidth    = "0px 0 0 0";
    }
 
document.body.appendChild(detail);

// on attend la fin de chargement du document, pour replaer l'image à superposer au bon endroit

function my_move()
    {
        var obj1 =document.getElementById("my_map"); // position de l'objet cible
        var top_map = getOffsets (obj1)[0];
        var left_map = getOffsets (obj1)[1];
        var obj2 =document.getElementById("my_detail"); // on récupère l'objet de l'image à superposer
        with(obj2){
             style.top        = top_map+"px";
              style.left        = left_map+"px";
        }
    }

window.onload=my_move;
</script>

Laurent
Passionné d'art et d'histoire

peu importe le nombre d'images   ;o)
FF déclenche parfois le javascript avant que le "html devant"
       ne soit interprété.   d'ou le onload.
il faut s'assurer que l'élément ( l'image)  est bien "actif"  avant
    d'y toucher.   on peut aussi tester complete sur l'image.
>>pas loin d'un millier d'image à positionner
    ça fait beaucoup... mais toutes sont dotées  d'actions ?
    et pourquoi n'avoir pas utilisé map + area simplement en html ?

---

                Cordialement            Bul         [mon Site]     [M'écrire]

En fait, pour chaque ouvrage à positionner sur la carte géographique, j'associe une couleur et une forme différente, ainsi qu'un lien actif permettant d'appeler la page correspondante.

voir la carte alsace-lorraine.

Là où ça se complique c'est que dans certains cas, je propose une carte de la région avec ses ponts, suivi une carte de la ville avec ses ponts. voir Paris :

Tout ça est généré en php, en dynamique à partir d'une base de données..
Avec une carte seulement ça marche, avec deux cartes, ça plante (au premier chargement), d'où mon appel à "expert".

Merci encore pour les conseils! je vais voir avec windows.onload, mais je crains que les temps de chargement ne soient rédhibitoires.

Passioné d'art et d'histoire

c'est très intéressant.

je ne sais pas si créer totalement cela en dynamique depuis une
    base de données  était une si bonne idée ?
sans critique aucune de quelques manières de quoi que ce soit !

ça me semble "simplement" relever de map + area en quasi pur htm
    ( ou ... généré en php )

---

                Cordialement            Bul         [mon Site]     [M'écrire]