Problema event javascript e firefox

[robysdc]

Salve a tutti

ho un problema con un javascript molto semlice ce fa comparire una finestra popup quando il mouse passa sopra un link o un'immagine;

Il mio problema è che lo script funziona bene con IE ma non ne vuole sapere di funzionare con FIREFOX...

Leggendo qua e la mi pare di aver capito che si tratta di un problema conosciuto dovuto ad alcuni "eventi" che essendo specifici x microsoft non vengono riconosciuti da firefox...


Il mio script funziona così (premetto che non sono un esperto quindi vi chiedo scusa per eventuali termini non appropriati..):

su ognuna delle pagine in cui lo script deve girare metto prima dell'Head il richiamo ai file che controllano il tutto:



<SCRIPT language=javascript
src="javascript/spinfunc.js">
</SCRIPT>

<STYLE>
.Description {
BORDER-RIGHT: #006699 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: #006699 0px solid; DISPLAY: none; PADDING-LEFT: 0px; FILTER: alpha(opacity=100); PADDING-BOTTOM: 0px; BORDER-LEFT: #006699

0px solid; WIDTH: 250px; PADDING-TOP: 0px; BORDER-BOTTOM: #006699 0px solid; POSITION: absolute;
}
</STYLE>

<SCRIPT language=javascript src=""></SCRIPT>

<SCRIPT language=javascript
src="javascript/js_popups.js"></SCRIPT>




Poi x ogni elemento (link o immagine) su cui voglio far comparire un popup metto questo codice:




<DIV class=Description id=1Pic style="DISPLAY: none">
[img]immagini/Deathknell/Cards/01.jpg[/img]</DIV>
<span class="Stile42"><A
href="Spoiler/spoilerDeathknell.htm#1" class="Stile11"
id=x0Pic
onmouseover='javascript:ShowDescriptionRight("1Pic ", 250);'
onmousemove='javascript:ShowDescriptionRight("1Pic ", 250);'
onmouseout='javascript:HideDescription("1Pic");'>





trovate un esempio dello script su queste pagine del mio sito:

http://myminiaturesite.altervista.or...tTheGiants.htm (popup su immagini)
http://myminiaturesite.altervista.or...e%20Giants.htm (popups sui link)


se apro una delle pagine del mio sito con Firefox e faccio strumenti-> consolle degli errori compare "event is not defined: http://myminiaturesite.altervista.or...t/js_popups.js Riga

27"

questo è la riga del codice del file riportato nell'errore:


x = event.clientX + document.body.scrollLeft + 0; /* get the mouse left position */



il codice completo lo trovate ovviamente su: http://myminiaturesite.altervista.or...t/js_popups.js
c'è anche un alto file da richiamare nelle varie pagine: http://myminiaturesite.altervista.or...pt/spinfunc.js


Dato che creo siti web per pura passione ma non sono certo un esperto mi chiedevo se qualcuno mi sapesse dire come fissare questo errore e cosa correggere nel codice..

Grazie mille anticipatamente

Roberto

[artorius]

no, non è proprio quello il problema:

Gli eventi vengono gestiti in maniera diversa a seconda dei browser, dove in internet explorer all'interno delle funzioni lanciate da un evento, trovi l'oggetto Event corrispondente all'evento in corso nella variabile globale window.event, in firefox viene passata questa variabile come ultimo argomento della funzione associata all'evento.

Ti consiglio di associare gli eventi agli elementi in questo modo:

window.onload = function(){
   var x0Pic = document.getElementById('x0Pic');
   x0Pic.onmouseover = function(e){
      ShowDescriptionRight("1Pic", 250, e);
   }
   x0Pic.onmousemove = function(e){
      ShowDescriptionRight("1Pic", 250, e);
   }
   x0Pic.onmouseout = function(){
      HideDescription("1Pic");
   }
   //Quersto lo dovrai fare per tutti gli elementi, anziché inserirli nell'html


} 

Poi modifichi ShowDescription

function ShowDescription(item, e)
{
 obj=document.getElementById(item);
 var evt = window.event || e;

 x = evt.clientX + document.body.scrollLeft + 0; /* get the mouse left position */
 y = evt.clientY + document.body.scrollTop + 15; /* get the mouse top position */
 obj.style.display="block";
 obj.style.left=x;
 obj.style.top=y;

 if (obj.innerHTML.length > 200) obj.style.width=325;

}//ShowDescription()

function ShowDescriptionCenter(item,itemwidth, e)
{
   obj=document.getElementById(item);
   var evt = window.event || e;

 x = evt.clientX + document.body.scrollLeft + 0; /* get the mouse left position */
 y = evt.clientY + document.body.scrollTop + 15; /* get the mouse top position */
   obj.style.display="block";
   obj.style.left=x-(itemwidth/2);
   obj.style.top=y;

   if (obj.innerHTML.length > 200) obj.style.width=325;
   if (obj.style.width < itemwidth ) obj.style.width=itemwidth;
  
}//ShowDescriptionCenter()

function ShowDescriptionLeft(item,itemwidth, e)
{
   obj=document.getElementById(item);
   var evt = window.event || e;

 x = evt.clientX + document.body.scrollLeft + 0; /* get the mouse left position */
 y = evt.clientY + document.body.scrollTop + 15; /* get the mouse top position */
   obj.style.display="block";
   obj.style.left=x-itemwidth;
   obj.style.top=y;
  
   if (obj.innerHTML.length > 200) obj.style.width=325;
   if (obj.style.width < itemwidth ) obj.style.width=itemwidth;

}//ShowDescriptionLeft() 

Il resto dovrebbe essere a posto

[robysdc]

Ti ringrazio davvero per la risposta celere..

quindi per ogni elemento su cui voglio far apparire un popup sostituisco nelle varie pagine html il mio vecchio codice:



<DIV class=Description id=1Pic style="DISPLAY: none">
[img]immagini/Deathknell/Cards/01.jpg[/img]</DIV>
<span class="Stile42"><A
href="Spoiler/spoilerDeathknell.htm#1" class="Stile11"
id=x0Pic
onmouseover='java-script:ShowDescriptionRight("1Pic", 250);'
onmousemove='java-script:ShowDescriptionRight("1Pic", 250);'
onmouseout='java-script:HideDescription("1Pic");'>




con quello suggerito da te:



window.onload = function(){
var x0Pic = document.getElementById('x0Pic');
x0Pic.onmouseover = function(e){
ShowDescriptionRight("1Pic", 250, e);
}
x0Pic.onmousemove = function(e){
ShowDescriptionRight("1Pic", 250, e);
}
x0Pic.onmouseout = function(){
HideDescription("1Pic");
}
//Quersto lo dovrai fare per tutti gli elementi, anziché inserirli nell'html


}




poi nel file "js_popups.js" la parte swohdescription come mi hai indicato.

Ho capito bene?
scusa per le domande che ti possono apparire sciocche ma, come dicevo, non sono propriamente un esperto...

[artorius]

Si devi fare proprio così.

Una cosa ci tengo a precisare:

fai un:

window.onload = function(){

}

e dentro queste parentesi graffe metti TUTTI gli assegnamenti per gli eventi.

[robysdc]

ho fatto una prova ma non riesco..

saresti così gentile da farmi un esempio pratico?

all'indirizzo:

http://myminiaturesite.altervista.org/JTEST.html

ho messo online una pag html di prova in cui fare un popup con un link e con una immagine (una qualsiasi a tua scelta) che dovrebbero vedersi con firefox ed IE

agli indirizzi:
http://myminiaturesite.altervista.or...t/js_popups.js
c'è il codice che ho provato a modificare come mi hai suggerito ma senza riuscire a far andare lo script)

all'indirizzo:

http://myminiaturesite.altervista.or...t/js_popups.js

c'è il codice originale senza modifiche

mi manderesti magari via mail (robysdc@libero.it) la pag.html ed il file .js modificati così capisco bene come fare..

so di chiederti una seccatura ma così penso di riuscire a capire una volta per tutte..

ti ringrazio infinitamente per l'aiuto che mi stai dando

[artorius]

è che c'è un errore di sintassi: alla riga 13 di js_popups.js non hai chiuso la }.

[robysdc]

grazie, ora provo..

EDIT: nn va con FIREFOX ma nemmeno più con IE.. effettivamente c'era la parentesi non chiusa ma penso che stia sbagliando ancora qualcosa..

questo è il nuovo codice modificato solo per 3 eventi:

http://myminiaturesite.altervista.or...t/js_popups.js

nella pag html devo cambiare qualcosa? l'ho lasciata così come era..

http://myminiaturesite.altervista.org/TDemonweb.htm


Comunque ti ho mandato una mail.. forse ci capiamo meglio (o meglio, forse capisco meglio io..)


grazie mille per l'aiuto..

[artorius]

scusa, ma se non metti l'id all'elemento non lo trverà mai...

document.getElementById('x0Pic');

ottiene un elemento con id="x0Pic", ma nel tuo codice non c'è nessun elemento con quell'id

[robysdc]

Per un simgolo popup in js_popups.js

è corretto se scrivo:

var x0Pic = document.getElementById('x0Pic');
x0Pic.onmouseover = function(e){
ShowDescriptionRight("1Pic", 250, e);
}
x0Pic.onmousemove = function(e){
ShowDescriptionRight("1Pic", 250, e);
}
x0Pic.onmouseout = function(){
HideDescription("1Pic");}

oppure dovrei scrivere come sotto ponendo tutti i valori di PIC uguali:

var x1Pic = document.getElementById('x1Pic');
x0Pic.onmouseover = function(e){
ShowDescriptionRight("1Pic", 250, e);
}
x0Pic.onmousemove = function(e){
ShowDescriptionRight("1Pic", 250, e);
}
x0Pic.onmouseout = function(){
HideDescription("1Pic");}


detto questo poi, nella pagina html in cui voglio vedere il popup, prima dell'elemento in questione dovrei mettere:

<DIV class=Description id=1Pic style="DISPLAY: none">
[img]immagini/Against the Giants/Cards/01.jpg[/img]</DIV>
<span class="Stile42"><A
href="Spoiler/SpoilerAgainstTheGiants.htm#1" class="Stile11 Stile5"
id=x0Pic
onmouseover='javascript:ShowDescriptionRight("1Pic ", 250);'
onmousemove='javascript:ShowDescriptionRight("1Pic ", 250);'
onmouseout='javascript:HideDescription("1Pic");'>


giusto?
insomma ho molta confusione su i valori da dare a PIC..

Ti ringrazio per la pazienza..

[artorius]

ma guarda che è solo l'id dell'elemento che conta, se l'id del tag anchor (<a> insomma) è 'x0Pic' devi usare var x0Pic = document.getElementById('x0Pic'); altrimenti devi usare l'id che usato.