DIV a comparsa: problemi con FF

[marco_c]

Ciao,
ho scritto una piccola funzione Javascript che al passaggio del mouse sopra un'area cliccabile di una mappa mi fa apparire un div che evidenzia i contorni dell'area cliccabile.

Questa la class CSS del div:

.box
{
    position:absolute;
    border:1px solid #900;
    color: #900;
    display: none;
    cursor: hand;
} 

Questo un estratto del codice

[img]700.jpg[/img]
<map name="mappa" id="mappa">
<area shape="rect" coords="160, 74, 224, 89" href="ordina.php" onmouseover="findElementPosition(img1, 0);" onmouseout="hideBox(0);">
<div class="box" style="{left:160; top:74; width:64; height:15}" id="box1"></div>
</area>
</map> 

Le funzioni Javascript non fanno altro che calcolare opportunamente le coordinate del div e visualizzarlo, poi quando si toglie il mouse lo fanno nascondere.

Con IE il box viene visualizzato correttamente e correttamente viene nascosto sull'onmouseout. Il problema si ha con FF: succede che quando vado sopra al DIV questo "flippa", cioè anche se rimango fermo col puntatore del mouse all'interno del div i contorni del div continuano a scomparire velocemente, come se continuasse a richiamare onmouseover seguito da onmouseout ogni millisecondo.

Qualcuno ha un suggerimento?
Se mi posiziono esattamente sul bordo del DIV il problema non si verifica. Forse bisognerebbe impostare qualche proprietà alla classe BOX in modo che abbia un qualche background che definisca bene che il DIV non sono solo i bordi, ma i bordi+l'interno. Il background però non dovrebbe nascondere l'immagine che sta sotto.

Ciao.

[giudf]

Ciao
ho il tuo stesso problema, che sicuramente sta nella differenza tra i 2 browser nell'interpretare il javascript quando "refreshi" il div.
Ad esempio, usare innerHTML e innerTEXT per aggiornare il div internet explorer va okkey, ma firefox da problemi, che funzioni hai usato per cambiare aggiornare o creare il tuo div ?!?
Potresti postare il tuo codice javascript ?!?

[marco_c]

Io avrei detto un problema di CSS. Sull'area del DIV in FF.
Cmq ecco il codice javascript.

<script language="JavaScript">
<!--

var curleft;
var curtop;
function findElementPosition(obj, i) 
{
    curleft = curtop = 0;
    if (obj.offsetParent) {
        curleft = obj.offsetLeft;
        curtop = obj.offsetTop;
        while (obj = obj.offsetParent) {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        }
    }
    
    var oldtop = document.getElementById('box1').style.top;
    oldtop = oldtop.substr(0, oldtop.length-2);
    document.getElementById('box1').style.top = Number(curtop) + Number(oldtop);
    var oldleft = document.getElementById('box1').style.left;
    oldleft = oldleft.substr(0, oldleft.length-2);
    document.getElementById('box1').style.left = Number(curleft) + Number(oldleft);
    document.getElementById('box1').style.display = 'block';
    
}
function hideBox(i) 
{
    var oldtop = document.getElementById('box1').style.top;
    oldtop = oldtop.substr(0, oldtop.length-2);
    document.getElementById('box1').style.top =  Number(oldtop) - Number(curtop);
    var oldleft = document.getElementById('box1').style.left;
    oldleft = oldleft.substr(0, oldleft.length-2);
    document.getElementById('box1').style.left = Number(oldleft) - Number(curleft);
    document.getElementById('box1').style.display = 'none';
}
//-->
</script> 

[deleted_110]

non ho letto tutto il codice ma un possibile errore lo vedo qua

<area shape="rect" coords="160, 74, 224, 89" href="ordina.php" onmouseover="findElementPosition(img1, 0);" onmouseout="hideBox(0);">

ma per FF img1 e' una variabile non instanziata.

Al massimo fai

<area shape="rect" coords="160, 74, 224, 89" href="ordina.php" onmouseover="findElementPosition('img1', 0);" onmouseout="hideBox(0);">

(cioe' ho aggiunto gli apici)

ma cosi' si deve modificare la funzione

function findElementPosition(objId, i)
{ 
   obj = document.getElementById(objId);
   ...

poi se ce le faccio verifico se il resto del codice e' cross browser

[marco_c]

Se quanto dici fosse vero non mi posizionerebbe il DIV giusto. La funzione javascript calcola la posizione del DIV sulla base della posizione dell'immagine. Se fosse sbagliato il riferimento a img1 non mi ritornerebbe le coordinate dell'immagine, e quindi il DIV non verrebbe posizionato giusto all'interno di essa. Invece tutta questa parte funziona correttamente sia in IE che in FF.