Newsgroup: it.comp.lang.javascript
Titolo: [newbie] rollover image con qualche variante.

Salve, come potrete notare dal subject sono un newbie.
Inizio con il presentarmi (così come "prescritto" dalla netiquette):
Mi chiamo Carmine Cairo, ho 25 anni e studio informatica all'Università di
Bologna.
Spero che per il momento basti, non vorrei descrivermi fisicamente
(potrebbero esistere persone in grado di non sopportare una descrizione
fisica di dubbio gusto) :)
Naturalmente se posto sul NG è perchè non sono riuscito a risolvere un
problema. Ho letto i post precedenti ma non ho trovato nulla che mi aiuti a
risolvere questo mio rompicapo, passo quindi ad illustrarlo sperando che
qualcuno possa aiutarmi.
Ho un frameset composto da due documenti, uno "nascosto" in quanto impostato
ad una altezza di 0px (prg.htm identificato nel frameset con il nome di
prg), e il secondo "visibile" che consente di visualizzare il contenuto del
sito (princ.htm identificato nel frameset con il nome di content).
Volevo realizzare un rollover image per il menu di navigazione ma ho
riscontrato dei problemi di compatibilità tra Explorer e Netscape. Dopo
giorni e giorni di sbattimenti *pardon* ho deciso di postare il codice da me
scritto. Seguo il NG da un mesetto ma con Javascript non ho ancora molta
dimestichezza.
In prg.htm è presente solo del codice Javascript che serve per gestire
azioni comuni alle varie pagine del sito.
Il codice postato rappresenta solo uno squarcio di quello presente nei due
documenti.
--- in princ.htm  ---
<html>
<head>
<script language="JavaScript1.1"><!--
function ImgOn(nome, numero)
{
  eval("document.images['" + nome + "'].src =
parent.frames['prg'].GetImgMenu(" + (numero+7) + ").src;");
  return true;
}
function ImgOff(nome, numero)
{
  eval("document.images['" + nome + "'].src =
parent.frames['prg'].GetImgMenu(" + numero + ").src;");
  return true;
}
// -->
</script>
</head>
<body>
<div id="LayContent" style="position:absolute; width:100%; height:100%;
z-index:0; visibility: visible; left: 0px; top: 0px">
  <table width="90%" border="0" align="center">
    <tr>
      <td valign="top" align="center" width="150px">
        <img name="ImgHome" width="150" height="60"
src="images/menu/0-on.gif"><BR>
        <a href="Aa.htm" onMouseOver="ImgOn('ImgAa',1);"
onMouseOut="ImgOff('ImgAa',1);">
          <img name="ImgAa" width="150" height="60"
src="images/menu/1-off.gif" border="0">
        </a><BR>
        <a href="Bb.htm" onMouseOver="ImgOn('ImgBb',2);"
onMouseOut="ImgOff('ImgBb',2);">
          <img name="ImgBb" width="150" height="60"
src="images/menu/2-off.gif" border="0">
        </a><BR>
        <a href="Cc.htm" onMouseOver="ImgOn('ImgCc',3);"
onMouseOut="ImgOff('ImgCc',3);">
          <img name="ImgCc" width="150" height="60"
src="images/menu/3-off.gif" border="0">
        </a><BR>
        <a href="Dd.htm" onMouseOver="ImgOn('ImgDd',4);"
onMouseOut="ImgOff('ImgDd',4);">
          <img name="ImgDd" width="150" height="60"
src="images/menu/4-off.gif" border="0">
        </a><BR>
        <a href="Ee.htm" onMouseOver="ImgOn('ImgEe',5);"
onMouseOut="ImgOff('ImgEe',5);">
          <img name="ImgEe" width="150" height="60"
src="images/menu/5-off.gif" border="0">
        </a><BR>
        <a href="mailto:
carc...@libero.it
"
onMouseOver="ImgOn('ImgEmail',6);" onMouseOut="ImgOff('ImgEmail',6);">
          <img name="ImgEmail" width="150" height="60"
src="images/menu/6-off.gif" border="0">
        </a><BR>
      </td>
      <td>Chi mi aiuta a farlo funzionare?</td>
    </tr>
  </table>
</div>
</body>
<html>
--- in prg.htm ---
<html>
<head>
<script language="JavaScript1.1"><!--
var ImgMenu = new Array();
var Nimg;
// Caricamento delle immagini di menu
for (Nimg = 0 ; Nimg < 7; Nimg++)
{
  ImgMenu[Nimg] = new Image();
  eval("ImgMenu["+Nimg+"].src = 'images/menu/"+Nimg+"-off.gif';");
  ImgMenu[Nimg+7] = new Image();
  eval("ImgMenu["+(Nimg+7)+"].src = 'images/menu/"+Nimg+"-on.gif';");
}
function GetImgMenu(index)
{
  return ImgMenu[index];
}
// FINE occultamento codice -->
</script>
</head>
<body>
</body>
</html>
--------------------------------------
Naturalmente le linee vanno riallineate.
Ho riportato solo l'essenziale, ora il punto è che Netscape non "digerisce"
le funzioni ImgOn e ImgOff in princ.htm. Premetto che inizialmente queste
funzioni erano presenti in prg.htm ma negli infiniti tentativi di risolvere
il problema sono passati (con le dovute modifiche) in princ.htm ed è stata
aggiunta la funzione GetImgMenu() in prg.htm.
Io ho studiato solo il linguaggio conforme allo standard ECMA-262 (a cui i
browser dovrebbero attenersi), in Explorer non ho riscontrato problemi,
mentre in Netscape Navigator 4.0 non riesco a far funzionare assolutamente
nulla. Tutto deve dipendere dal fatto che ci sono delle variabili in un
altro frame e quindi per qualche ragione da Netscape non riesco ad
accedervi. Vorrei tenere le immagini in prg.htm (unica pagina sempre
presente) poichè il menu' è presente in ogni pagina e quindi vorrei evitare
che il browser ricarichi ogni volta le immagini.
Tra l'altro lo standard descrive anche la gestione degli ambienti di
esecuzione e non mi sembra di violare nulla, risultato: non ci capisco più
nulla :)
Avete qualche consiglio?
Grazie a tutti e ... buona giornata / nottata.
Bye Bye By
Carmine Cairo

Prova questo:
<script language="javascript">
function imgSwap(pic1,pic2)
{
   if (document.images)
   {
      document.images[pic1].src = eval(pic2 + ".src");
   }
}
if (document.images)
{
   immagine1A = new Image();
   immagine1A.src = "imm_on1.gif";
   immagine1B = new Image();
   immagine1B.src = "imm_off1.gif";
   immagine2A = new Image();
   immagine2A.src = "imm_on2.gif";
   immagine2B = new Image();
   immagine2B.src = "imm_off2.gif";
}
</script>
<body>
<a href="1.htm" onmouseover="imgSwap('imm1','immagine1B')"
onmouseout="imgSwap('imm1','immagine1A')"><img src="imm_on1.gif" name="imm1"
border=0></a>
<a href="2.htm" onmouseover="imgSwap('imm2','immagine2B')"
onmouseout="imgSwap('imm2','immagine2A')"><img src="imm_on2.gif" name="imm2"
border=0></a>
Ciao
Giuseppe Di Natale
gdin...@jsdir.com
http://www.jsdir.com

Fondamentalmente il mio problema era quello di mantenere le immagini
nell'ambiente di esecuzione del frame "nascosto" e gestirle alla stregua di
variabili globali. Con la soluzione che mi proponi le immagini fanno parte
del documento che ne gestisce il rollover. A questo punto mi chiedo: quando
l'utente cambia pagina, le immagini verranno ricaricate? Preferirei che la
risposta fosse NO, ovvero che non ci sia un overhead sulla rete per la
spedizione verso il client delle immagini, ecco perchè avevo scelto di
precaricarle in un frame diverso. Sai indicarmi come si comportano i browser
in questo caso?
Ad ogni modo ti ringrazio di tutto cuore, Giuseppe, per l'attenzione che hai
posto al mio problema.
Ciao


Se le immagini sono le stesse in tutte le pagine del sito (se si tratta di
un menů dovrebbe essere cosě), in linea di massima il browser le carica la
prima volta e poi le conserva in cache dalla quale le preleva per i
successivi caricamenti


Grazie Giuseppe, ho fatto un po' di prove e sembra che entrambi i browser
riconoscano di aver già scaricato le immagini, per cui non generano un
ulteriore overhead. Sei stato preziosissimo e io ... bhe, ho dimostrato di
essere un vero newbie :P


Non ti preoccupare, il NG sta qua per questo. Smile
