Newsgroup: it.comp.lang.javascript
Titolo: OnOver su Netscape

Ciao a tutti, ho un problema con Netscape e non riesco a risolverlo.
Ho scritto una pagina in cui un menu' e' formato da 4 immagini
disposte come dei fogli sovrapposti (tipo i fogli di excell) con una
immagine sottostante di descrizione.
Ogni volta che il puntatore del topone si sposta da un'immagine
all'altra porto l'immagine selezionata e sostituisco la descrizione in
quella sottostante.
Per fare questo uso il comando:
<IMG SRC="iimg01.gif"  NAME="Uno" OnMouseOver="metti(1); return
true;">
e nella funzione metti(); gestisco tutti gli scambi di immagini.
Ora questo mi funziona benissimo su IE5, ma non su Nescape e non
riesco a trovare una via d'uscita.
Ho provato con <A HRFE=..>, ma mi circonda le immagini con una cornice
e non va bene, ho provato a scrivere la pagina dinamicamente, ma non
funziona lo stesso (puo' darsi che abbia sbagliato nello script).
Non esiste proprio nessun modo per risolvere il problema?
Grazie
Simona

 ha scritto nel messaggio
news:38d0c26b...@news.unimi.it...



Hai ragione, in effetti senza codice non si capisce molto. Te lo
aggiungo di seguito, anche se non e' un esempio di bella
programmazione.
Ciao
Simona
======================================================
<HTML>
<HEAD>
<TITLE>Banche dati in rete di ateneo</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Crea una matrice d'immagini di dimensioni 4x6, ossia 4 scelte con
//  sei immagini per riga (l'ultima immagine contiene la descrizione
//  della scelta
var i, j;
bn = new Array(24);
for(j = 1; j <= 4; j++)
{
        for(i = 1; i < 6; i++)
        {
                bn[6*(j-1) + i] = new Image();
                bn[6*(j-1) + i].src = "img/BD"+j+i+".gif";
        };
        bn[6*(j-1) + 6] = new Image();
        bn[6*(j-1) + 6].src = "img/Com0"+j+".gif";
};
function metti(n)
{
        if(n == 1)
        {
                Uno.src = bn[1].src;
                Due.src = bn[2].src;
                Tre.src = bn[3].src;
                Quattro.src = bn[4].src;
                Cinque.src = bn[5].src;
                Sei.src = bn[6].src;
        };
        if(n == 2)
        {
                Uno.src = bn[7].src;
                Due.src = bn[8].src;
                Tre.src = bn[9].src;
                Quattro.src = bn[10].src;
                Cinque.src = bn[11].src;
                Sei.src = bn[12].src;
        };
        if(n == 3)
        {
                Uno.src = bn[13].src;
                Due.src = bn[14].src;
                Tre.src = bn[15].src;
                Quattro.src = bn[16].src;
                Cinque.src = bn[17].src;
                Sei.src = bn[18].src;
        };
        if(n == 4)
        {
                Uno.src = bn[19].src;
                Due.src = bn[20].src;
                Tre.src = bn[21].src;
                Quattro.src = bn[22].src;
                Cinque.src = bn[23].src;
                Sei.src = bn[24].src;
        };
}
function carica(n)
{
        if(n == 1) parent.frames['Utile'].location = "testo1.html";
        if(n == 2) parent.frames['Utile'].location = "testo2.html";
        if(n == 3) parent.frames['Utile'].location = "testo3.html";
        if(n == 4) parent.frames['Utile'].location = "testo4.html";
}
//-->
</SCRIPT>
</HEAD>
<BODY LINK="#000000" BGCOLOR="#FFFFFF">
<CENTER><TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="711">
<TR><TD>
<IMG SRC="img/BD11.gif" NAME="Uno" OnMouseOver="metti(1); return
true;" OnClick="carica(1); return true;"><IMG
 SRC="img/BD12.gif" NAME="Due" OnMouseOver="metti(2); return true;"
OnClick="carica(2); return true;"><IMG
 SRC="img/BD13.gif" NAME="Tre" OnMouseOver="metti(3); return true;"
OnClick="carica(3); return true;"><IMG
 SRC="img/BD14.gif" NAME="Quattro" OnMouseOver="metti(4); return
true;" OnClick="carica(4); return true;"><IMG
 SRC="img/BD15.gif" NAME="Cinque"><BR><IMG
 SRC="img/Com01.gif" NAME="Sei">
</TABLE></CENTER>
<P>
</BODY>
</HTML>
===========================================================
Non sono sicura che il prg di news che sto usando mantenga la
formattazione del testo...

 scriveva:
Ciao, Simona.. :)
Ti conviene usare la libreria DHTML.js
La puoi scaricare da 
www.probo.it/javascript/dhtml.js
Usando le sue funzioni diventerà molto più facile programmare Explorer e
Netscape insieme...
;)
L'ho fatto un po' di corsa... se non funziona bene dimmelo...
<HTML>
<HEAD>
<TITLE>Banche dati in rete di ateneo</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="dhtml.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Crea una matrice d'immagini di dimensioni 4x6, ossia 4 scelte con
//  sei immagini per riga (l'ultima immagine contiene la descrizione
//  della scelta
var i, j;
bn = new Array(24);
for(j = 1; j <= 4; j++)
{
        for(i = 1; i < 6; i++)
        {
                bn[6*(j-1) + i] = new Image();
                bn[6*(j-1) + i].src = "img/BD"+j+i+".gif";
        };
        bn[6*(j-1) + 6] = new Image();
        bn[6*(j-1) + 6].src = "img/Com0"+j+".gif";
};
// Stasera avevo voglia di "zippare" un po' di funzioni, che ne dici se lo
faccio anche con il tuo script?
// ;)
function metti(n)
{
    for(i=0;i<6;i++)
getImage(Array("Uno","Due","Tre","Quattro","Cinque","Sei")[i]).src=bn[1+i+6*
(n-1)].src
}
function carica(n)
{
 parent.frames['Utile'].location = "testo" +n +".html";
}
// -->
</SCRIPT>
</HEAD>
<BODY LINK="#000000" BGCOLOR="#FFFFFF">
<CENTER><TABLE BORDER="01" CELLPADDING="0" CELLSPACING="0" WIDTH="711">
<TR><TD>
<!--
Per quanto riguarda i tag <img>, essi non supportanto onmouseover,
onmouseout, e onclick su Netscape.
Al massimo puoi intercettare onmousedown e onmouseup su un'immagine, ma per
il mouseover e il mouseout devi per forza usare un layer:
-->
<div id=d0 style="position:relative;">
<a href="javascript:void carica(1)" onmouseover="metti(1)"><IMG
SRC="img/BD11.gif" border=0 NAME="Uno"></a>
</div>
<div id=d1 style="position:relative;">
<a href="javascript:void carica(2)" onmouseover="metti(2)"><IMG
SRC="img/BD12.gif" border=0 NAME="Due"></a>
</div>
<div id=d2 style="position:relative;">
<a href="javascript:void carica(3)" onmouseover="metti(3)"><IMG
SRC="img/BD13.gif" border=0 NAME="Tre"></a>
</div>
<div id=d3 style="position:relative;">
<a href="javascript:void carica(4)" onmouseover="metti(4)"><IMG
SRC="img/BD14.gif" border=0 NAME="Quattro"></a>
</div>
<IMG SRC="img/BD15.gif" NAME="Cinque">
<BR>
<IMG SRC="img/Com01.gif" NAME="Sei">
</TABLE></CENTER>
</BODY>
</HTML>
Bye.
Ðarius.

il mouseover e il mouseout devi per forza usare un layer:
Purtroppo l'ho scoperto! :(((
Ascolta, sai quello che dicevo poco fa sul DHTML? Beh, posso dire la
stessa cosa sui layer (che mi sa siano parenti molto stretti)?
Grazie
Simona

stessa cosa sui layer (che mi sa siano parenti molto stretti)?
I layer sono trattati in maniera radicalmente diversa dai due browser ed
hanno anche proprieta' diverse =(
in IE sono visti allo stesso livello di document, cioe' o chiami
"window.document.proprieta" o "window.nomelayer.proprieta", in netscape
invece devi chiamare:
"window.document.layers[nomelayer].proprieta".
=(
tutto cio' mi ha reso infelice.
Nettuno

Ciao Simo,
in effetti ti avevo risposto un po' di fretta prima, il codice che ti avevo
dato era "quasi" corretto, nel senso, che avrebbe dovuto essere del tipo:
<a href='fileName' onMouseOver='metti(n)'> etc </a>
per farmi perdonare ho riscritto il tuo codice ;))
*****
<html>
  <head>
  <title>Banche dati in rete di ateneo</title>
  <script language='JavaScript'>
    <!-- hide IE3 -->
    v4=(parseFloat(navigator.appVersion)>=4) ? 1:0;
    bV=(navigator.appName=='Netscape') ? 1:0;
    roll=((bV)||(v4)) ? 1:0;
    if(roll) {
      var j=-5; bn=new Array();
      for(var i=1; i<=4; i++) {
        j+=6;n=0
        for(k=j; k<=(j+5); k++) {
          n++;
          bn[k]= new Image();
          bn[k].src='img/BD'+i+n+'.gif';
        }
        bn[k-1]=new Image();
        bn[k-1].src='img/Com0'+i+'.gif';
      }
    }
    function metti(n){
      which=new Array("Uno", "Due", "Tre", "Quattro", "Cinque", "Sei");
      for(i=0; i<6; i++) {
        document.images[which[i]].src=bn[1+i+6*(n-1)].src;
      }
    }
    function carica(n) {
      parent.frames['Utile'].location.href="testo"+n+".html";
    }
</script>
</head>
<body link='#000000' bgcolor='#ffffff'>
<table border=0 cellpadding=0 cellspacing=0 width=711 align=center>
  <tr>
    <td>
      <a href='javascript:carica(1)' onMouseOver='if(roll)metti(1)'>
        <IMG SRC="img/BD11.gif" NAME="Uno" border=0></a>
      <a href='javascript:carica(2)' onMouseOver='if(roll)metti(2)'>
        <IMG SRC="img/BD12.gif" NAME="Due" border=0></a>
      <a href='javascript:carica(3)' onMouseOver='if(roll)metti(3)'>
        <IMG SRC="img/BD13.gif" NAME="Tre" border=0></a>
      <a href='javascript:carica(4)' onMouseOver='if(roll)metti(4)'>
        <IMG SRC="img/BD14.gif" NAME="Quattro" border=0></a>
      <IMG SRC="img/BD15.gif" NAME="Cinque"><BR>
      <IMG SRC="img/Com01.gif" NAME="Sei"></td>
  </tr>
</table>
</body>
</html>
****
Grazie Darius per aver semplificato in [1+i+6*(n-1)].
questo codice non richiede la libreria DHTML.
Osservazioni:
1) il codice non verra' letto da IE3, che anzi genera errori con questi
comandi, per cui questi sono stati nascosti se si usa IE3.
2) Usa immagini della stessa width e della stessa height o altrimenti NN3
potrebbe dare problemi di visualizzazione (generalmente mostra le immagini
di rollOver con width ed height della immagine precedente.)
In caso le immagini non abbiano le stesse dimensioni si dovra' nascondere il
codice anche per NN3, per far questo e' sufficiente convertire if(roll) in
if(v4).
Arvz

 </div>
ma (con molta umiltą domando) per essere compreso anche da netscape non
dovrebbe essere
<div onmouseover="metti(1)">
  <layer onmouseover="metti(1)">
    .....
  </layer>
</div>
--
ciao, Michele
se usi Outlook e rispondi R: e non RE:, patch:
http://utenti.tripod.it/vene/mail/patch.html
primo passo nel mondo NG: it.faq
per le prove: it.test

 ha scritto nel messaggio
news:8at4od$nfj$1...@nslave2.tin.it...


Volevo ringraziarvi tutti per l'aiuto.
Ho finito di trasportare il codice nella pagina e finalmente
funziona!!! :)
Ancora grazie
Simona

 ha scritto nel messaggio
news:38d76446...@news.unimi.it...


 dovrebbe essere
[cut]
Dunque...
un link, cioè il tag <a>, supporta pienamente onmouseover, onmouseout,
onmousedown, etc...
Se usi un <div>, invece, gli eventi mouseover e mouseout non vengono
immediatamente catturati da Netscape, a meno che non chiami la funzione
captureEvents() per il layer stesso (vedi documentazione NS), oppure usi
la funzione cross-browser setEvent() della libreria DHTML.js:
    setEvent("oggetto", "nomeevento", "operazioni")
che fa da sola tutte le cose sopra descritte.
Se vuoi impostare l'evento per il tuo tag <div>, dovrai scrivere:
    setEvent(__reachLayer("nomelayer"), "onmouseover", "alert('intercettato
il mouse sul div...')")
Ripeto ad ogni modo che, visto che abbiamo usato dei link, non è più per
forza necessario usare i layer...
:)
Bye.
Ðarius.

 stessa cosa sui layer (che mi sa siano parenti molto stretti)?
Già... sono parenti molto stretti... :)
Per quanto riguarda i tutorial, prova su 
www.risorse.net
, eventualmente su
www.html.it
, anche se online si trovano principalmente esempi pratci...
Bye.
Ðarius.

 if(v4).
Diciamo che purtroppo i problemi ci sono anche con Netscape 4.x, e per
scambiare un'immagine con un'altra di dimensioni differenti non basta
cambiare la src, né le proprietà width o height, che Netscape non permette
di fare.
Sarà invece necessario inserire l'immagine in un layer, e per sostituire la
stessa con un'altra immagine di dimensioni diverse, bisognerà riscrivere il
layer stesso:
<div id="mioLayer" ....>
<img src="foto1.gif" width=100 height=50>
</div>
function cambiaImmagine_con_dimensioni_diverse()
{
    writeLayer("mioLayer","<img src='foto2.gif' width=55 height=85>")
}
Bye.
Ðarius.