Newsgroup: it.lavoro.professioni.webmaster
Titolo: Layer, problemi :(

Ho un problema,
Non capisco dove sbaglio nel seguente listato:
<html>
<head>
<title>Test Layer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<Script>
 function HideLayer ()
  {
   document.layers ["HelpLayer0"].visibility = "Hide";
   document.layers ["HelpLayer1"].visibility = "Hide";
   document.layers ["HelpLayer2"].visibility = "Hide";
   document.layers ["HelpLayer3"].visibility = "Hide";
   document.layers ["HelpLayer4"].visibility = "Hide";
  }
 function ChangeLayer (n)
  {
   HideLayer ();
   document.layer ["HelpLayer" + n].vusibility = "inherit";
  }
</Script>
<Layer id="HelpLayer0" left=300 top=50 width=200 visibility=show
bgcolor=#00ff00>
 Questo livello fornisce una descrizione del collegamento su cui si trovano
i pruntatori
</Layer>
<Layer id="HelpLayer1"  left=300 top=50 width=200 visibility=hide
bgcolor=#FFFF00>
 L'agenda dell'ultimo meeting č disponibile
</Layer>
<Layer id="HelpLayer2"  left=300 top=50 width=200 visibility=hide
bgcolor=#FFFF00>
 Potete leggere le ultime notizie sul meeting
</Layer>
<Layer id="HelpLayer3"  left=300 top=50 width=200 visibility=hide
bgcolor=#00FFFF>
 L'agenda dell'ultimo meeting č disponibile
</Layer>
<Layer id="HelpLayer4"  left=300 top=50 width=200 visibility=hide
bgcolor=#F0F0F0>
 Guardate nel documento due dell'ultimo meeting
</Layer>
<Layer id="LinkLayer"  left=50 top=50 width=200 visibility=hide
bgcolor=#F0F0F0>
 <A href="agenda.html" OnMouseOver="ChangeLayer(1)"
OnMouseOut="ChangeLayger(0)"> Agenda </A> <Br>
 <A href="minutes.html" OnMouseOver="ChangeLayer(2)"
OnMouseOut="ChangeLayger(0)"> Ultime Notizie </A> <Br>
 <A href="enc101.html" OnMouseOver="ChangeLayer(3)"
OnMouseOut="ChangeLayger(0)"> Documento </A> <Br>
 <A href="enc102.html" OnMouseOver="ChangeLayer(4)"
OnMouseOut="ChangeLayger(0)"> Documento due </A> <Br>
</Layer>
</body>
</html>
Ho provato anche mettendo NAME  al posto di ID ma nulla... in sostanza
l'effetto dei livelli non funziona.
Premetto che uso Explorer 6, potreste per cortesia dirmi cosa non va?
Ringrazio anticipatamente.
I. Marcello (Cooper)


Che se non ricordo male i <layer> puoi usarli con Netscape ma con IE
devi utilizzare i <div>
Claudio


Fatto, adesso sul piano visivo funziona, ma non funziona il cambiamento dei
livelli al variare della posizione del mouse sui link.
Te ne sarei grato se mi aiutassi ancora una volta.
I. Marcello (Cooper).


Non ho sottomano un testo (ma se ne hai bisogno lo cerco) anche la
gestione della visibilita' di un layer (o div) e' gestita in modo
diverso tra NS  e IE.
Aspe' che se trovo on line ti fornisco il link presso cui trovare
info
Claudio


Prova a buttare un occhio qui:
http://hotwired.lycos.com/webmonkey/98/15/index4a_page5.html?tw=auth
oring
E' in inglese (problemi?) e sono le pagine che ho seguito anni fa
per mia cultura personale.
In italiano non c'era moltissimo ... anzi niente e questi di Wired
erano bravissimi
Claudio

 
http://hotwired.lycos.com/webmonkey/98/15/index4a_page5.html?tw=authoring
Ho visto grazie, ma a prescindere dall'inglese credo che mi so confuso, io
vorrei basarmi sul listato dello script che ho postato precedentemente...
penso sia il modo più semplice se si trovassero gli eventuali errori.
Premetto che l'ho tratto da HTML 4 un libro con la copertina rossa.
Ringrazio anticipatamente ancora una volta per l'aiuto che mi darai.
Cordialmente, I. Marcello (Cooper)

 vorrei basarmi sul listato dello script che ho postato
precedentemente...
Si ma io proprio per quello ti ho proposto quel link.
Premesso che non sono un gran amante di javascritp e che non sono
certo il maggior esperto esistente di CSS secondo me il tuo errore
sta qui
document.layers ["HelpLayer0"].visibility = "Hide";
non puoi settare visibility=hide perche' semmai e' visibility=hidden
Non ho controllato tutto lo script e tutto il codice di esempio da
te postato ma quello che ti ho segnalato mi salta agli occhi.
Claudio


Ho corretto anche quello (Hide era legato al tag LAYER) infatti, ma nulla :(
Cooper.

 OnMouseOut="ChangeLayger(0)"> Agenda </A> <Br>
[...]
Scusa ma la funzione non si chiama ChangeLayer()????
guarda OnMouseOut.... c'e' una "g" di troppo...
;o)
--
Xantos
m.mo...@NlOiSbPeArMo.it
 per rispondermi basta non urlare!

, 
ima...@hotmail.com
 
says...

Sperando che ti interessi ancora, anche se siamo altamente OT mi sembra 
che possa essere uno script di uso molto comune.
Ci sono parecchi errori di fondo nel codice che hai scritto:
- Gli spazi non sono consentiti: function HideLayer() e non function 
  HideLayer[spazio]()
- Gli spazi non sono consentiti: ...layers["... e non 
  ...layers{spazioe}["...
- JavaScript e' case-sensitive: onMouseOver/onMouseOut e non OnMouse...
- "inherit" non c'entra nulla con la visibilita'
- "visibility" e non v[u]sibility :-))
Questi i più grossolani, ma il problema di fondo è che come ti ha fatto 
notare Claudio hai usato <LAYER> che è un tag proprietario di NN4 fuori 
standard (come il MARQUEE di IE per intenderci).
Per fare semplicemente dei rollover fra livelli innanzitutto rendili 
compatibili con tutti i browser dalla 4 in poi scrivendoli come <DIV> ed 
usando STYLE per le proprietà:
<DIV ID="HelpLayer0" 
STYLE="position:absolute;left:300;top:50;width:200;height:30;background-
color:#00ff00;layer-background-color:#00ff00;visibility:visible">  Questo 
livello fornisce una descrizione del collegamento su cui si trovano i 
pruntatori </DIV>
<DIV ID="HelpLayer1" 
STYLE="position:absolute;left:300;top:50;width:200;height:30;visibility:h
idden;background-color:#ffff00;layer-background-color:#ffff00">  L'agenda 
dell'ultimo meeting è disponibile </DIV>
<DIV ID="HelpLayer2" 
STYLE="position:absolute;left:300;top:50;width:200;height:30;visibility:h
idden;background-color:#ffff00;layer-background-color:#ffff00">  Potete 
leggere le ultime notizie sul meeting </DIV>
<DIV ID="HelpLayer3" 
STYLE="position:absolute;left:300;top:50;width:200;height:30;visibility:h
idden;background-color:#0000ff;layer-background-color:#0000ff">  L'agenda 
dell'ultimo meeting è disponibile </DIV>
<DIV ID="HelpLayer4" 
STYLE="position:absolute;left:300;top:50;width:200;height:30;visibility:h
idden;background-color:#f0f0f0;layer-background-color:#f0f0f0">  Guardate 
nel documento due dell'ultimo meeting </DIV>
<DIV ID="LinkLayer" 
STYLE="position:absolute;left:50;top:50;width:200;height:30;visibility:vi
sible;background-color:#ff0000;layer-background-color:#ff0000">
 <A href="agenda.html" onMouseOver="ChangeLayer(1)" 
onMouseOut="ChangeLayer(0)"> Agenda </A> <Br>
 <A href="minutes.html" onMouseOver="ChangeLayer(2)" 
onMouseOut="ChangeLayer(0)"> Ultime Notizie </A> <Br>
 <A href="enc101.html" onMouseOver="ChangeLayer(3)" 
onMouseOut="ChangeLayer(0)"> Documento </A> <Br>
 <A href="enc102.html" onMouseOver="ChangeLayer(4)" 
onMouseOut="ChangeLayer(0)"> Documento due </A> <Br>
</DIV>
Ogni gruppo ovviamente è una riga sola! :-)
Poi per la parte JavaScript devi necessariamente usare il codice giusto 
richiesto dai browser in cui sta girando, quindi discernere fra:
- NN4                    (document.layers)
- IE4+ (DOM1)            (document.all)
- IE5//N6 (DOM2)         (document.getElementById)
Questo è lo stesso script che hai usato tu, però corretto in modo che 
funzioni:
function HideLayer()
{
if (document.layers)
   {	
   document.layers.HelpLayer0.visibility = "hide";
   document.layers.HelpLayer1.visibility = "hide";
   document.layers.HelpLayer2.visibility = "hide";
   document.layers.HelpLayer3.visibility = "hide";
   document.layers.HelpLayer4.visibility = "hide";
   }
if (document.all)
   {
   document.all.HelpLayer0.style.visibility="hidden";
   document.all.HelpLayer1.style.visibility="hidden";
   document.all.HelpLayer2.style.visibility="hidden";
   document.all.HelpLayer3.style.visibility="hidden";
   document.all.HelpLayer4.style.visibility="hidden";
   }
if (document.getElementById)
   {
   document.getElementById("HelpLayer0").style.visibility="hidden";
   document.getElementById("HelpLayer1").style.visibility="hidden";
   document.getElementById("HelpLayer2").style.visibility="hidden";
   document.getElementById("HelpLayer3").style.visibility="hidden";
   document.getElementById("HelpLayer4").style.visibility="hidden";
   }
}
function ChangeLayer(n)
{
HideLayer();
if (document.layers)
   document.layers["HelpLayer" + n].visibility="show";
if (document.all)
   document.all["HelpLayer" + n].style.visibility="visible";
if (document.getElementById)
   document.getElementById("HelpLayer" + n).style.visibility="visible";
}
Ovviamente messo così è un delirio, sia da scrivere che da manutenere, 
anche se ovviamente uno alle prime armi non ha altri mezzi.
Comunque si può riassumere tutto in queste 12 righe di codice (commenti 
esclusi):
---> Occhio alle righe da ricostruire. <---
---> Ho indentato tutto cosi' e' piu' facile <----
----------------------------------------------------- inizio ---
// Una variabile nella quale memorizzo l'ultimo livello reso disponibile 
per nasconderlo al rollOn sul successivo
// (preimpostata al primo livello, ma potrebbe essere uno qualsiasi, 
tanto viene nascosto)
var LastLiv=1;
// Un array nel quale memorizzo gli "oggetti" livello con la funzione 
Inizia() che scatta all'onLoad() nel <BODY>
// Poi nella funzione ChangeLayer applichero' la proprieta' "visibility" 
direttamente agli elementi dell'array ottenendo lo stesso effetto
var livelli = new Array();
function Inizia()
	{
	for (i=0 ; i<5 ; i++)
		livelli[i]=document.layers?document.layers["HelpLayer"+i]:d
ocument.getElementById?document.getElementById("HelpLayer"+i).style:docum
ent.all["HelpLayer"+i].style;
	/*
	La riga eseguita dall' if() e' equivalente a questa sestupla, ma 
come l'ho scritta io consente di risparmiare righe e facilita il debug di 
lunghi listati:
	if (document.layers)
		livelli[i]=document.layers["HelpLayer"+i];
	if (document.getElementById())
		livelli[i]=document.getElementById("HelpLayer"+i).style;
	if (document.all)
		livelli[i]=document.all["HelpLayer"+i].style;
	*/
//alert(document.links[0].text);
	}
function ChangeLayer(n)
	{
    //Nascondo il livello 0
	livelli[0].visibility="hidden";
 
	// nascondo l'ultimo livello
	livelli[LastLiv].visibility="hidden"
 
	// rendo visibile il livello richiesto
	livelli[n].visibility="visible";
 
	// memorizzo l'indice solo se ho lavorato su un livello diverso da 
0
	LastLiv=n==0?LastLiv:n;
	// Questa riga e' equivalente a questa if() ma a me piace di piu' 
il costrutto " ?: "
	/*
	if (n!=0)
		lastLiv=n
	*/
	}
--------------------------------------------------- fine ---
Questa seconda soluzione necessita che modifichi il tag body:
<body bgcolor="#FFFFFF" text="#000000" onLoad="Inizia()">
Perche' la funzione Inizia() memorizza gli oggetti che vengono poi usati 
dal resto dello script.
----------------------
Per un commento più approfondito tieni d'occhio gli StaffScript di JsDir 
perche' mi hai dato un ottimo spunto per uno script ed un tutorial :-))
---------------------------------------
-- 
Ciao, Riccardo
------------------------------------------------------------------------
http://www.jsdir.com
 ---- Bring Your Site To Life!!!!
------------------------------------------------------------------------
http://www.dev2dev.it
 - La rete ha connesso nuove particelle - D2D006
------------------------------------------------------------------------
 ----> itALY = it <----


Grazie mille, la tua spiegazione è chiarissima, funziona e va a meraviglia e
soprattutto ho capito dove sbagliavo. Grazie ancora :-))))
Mi sei stato di grande aiuto
I. Marcello (Cooper)