Newsgroup: it.comp.lang.javascript
Titolo: Layer

Salve a tutti
sono pochi giorni che ho capito cosa sono veramente i layer
e mi č venuta subito un'idea per il sito che stņ facendo ma ho un problema
praticamente devo mettere un layer invisibile che diventa visibile al
passaggio su un link esterno,
possibilmente un'immagine.
č possibile?
ciao
||
"Mentre le truppe di Multani invadevano Urborg, la decomposizione della
palude divenne un banchetto per i vivi"
||

 è possibile?
certo!
guarda qui :)
Ciao, Daniele.
<html>
<head>
<title>mostralayer</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function vedi(layer_id, vis){
   var nav="";
   if(document.layers)
    nav="NN4x";
   if(document.all)
    nav="IE4x";
   if((document.getElementById) && (navigator.appName == "Netscape"))
    nav="NN6x";
   if((document.getElementById) && (navigator.appName == "Microsoft 
Internet Explorer"))
    nav="IE5x";
   if((document.getElementById) && (navigator.appName == "Opera"))
    nav="OP5x";
  switch(nav){
   case "NN4x":
    document.layers[layer_id].visibility=(vis=="on")?"show":"hide";
    break;
   case "IE4x":
    document.all[layer_id].style.visibility=(vis=="on")?"visible":"hidden";
    break;
   case "NN6x":
 
document.getElementById(layer_id).style.visibility=(vis=="on")?"visible":"hidden";
    break;
   case "IE5x":
 
document.getElementById(layer_id).style.visibility=(vis=="on")?"visible":"hidden";
    break;
   case "OP5x":
 
document.getElementById(layer_id).style.visibility=(vis=="on")?"visible":"hidden";
    break;
  }
}
//-->
</script>
</head>
<body>
<div id="nomeLayer" style="position:absolute; top:50px; left:50px; 
background-color:#dddddd; visibility:hidden">ciao</div>
<a href="javascript:void(0)" onMouseOver="vedi('nomeLayer','on')" 
onMouseOut="vedi('nomeLayer','off')">vedi il layer</a>
</body>
</html>

 è possibile?


> Cos'e' un Layer ?
potremmo definire un layer come un paragrafo di tipo 'block level' 
identificato quasi sempre, ma non obbligatoriamente, dai tag <div></div> 
e caratterizzato dall'applicazione di uno stile definito normalmente in 
linea mediante il quale si imposta per lo meno il posizionamento 
assoluto del paragrafo stesso rispetto al punto in alto a sx della 
finestra del browser o del frame in cui la pagina contenente il layer è 
caricata.
esempio
<div style="position:absolute; top: 10px; left: 15px;">contenuto del 
layer</div>
all'atto pratico, puoi immaginare i layer come dei 'vassoietti' di 
dimensione e posizione fissata entro i quali puoi inserire quello che vuoi.
Se le dimensioni di un oggetto inserito eccedono quelle del layer questi 
può:
- deformarsi come farebbe una tabella
- far apparire delle scrollbars
- tagliare le porzioni eccedenti dell'oggetto contenuto nascondendole
layer diversi possono sovrapporsi del tutto o in parte ed è possibile 
indicare "l'altezza da terra" degli stessi in modo da definire un 
ordinamento verticale.
Gestisci questo con l'attributo di stile z-index che accetta valori 
interi positivi
Puoi impostare la visibilità o meno di un layer mediante l'attributo 
visibility che può assumere i valori visibile o hidden
un layer non interferisce minimamente con l'organizzazione planare della 
pagina web, è come se fosse un post-it applicato sopra.
essendo fondamentalmente un paragrafo block-level, puoi applicare tutte 
le formattazioni rese disponibili dagli stili css.
Se vuoi impiegare una formattazione molto elaborata, allora ti conviene 
definire uno stile css e applicarlo al layer mediante gli attributi 
class oppure id
esempio
<html>
<head>
<title>layers</title>
<style type="text/css">
<!--
body{
	background-color:	#000000;
	color:			#efefef;
	padding:		10px;
}
.mioLayer{
	position:		absolute;
	width:			150px;
	height:			250px;
	top:			15px;
	left:			250px;
	z-index:		2;
	visibility:		visible;
	margin:			5px 5px 5px 5px;
	padding:		5px 10px 15px 5px;
	overflow:		auto;
	background-color:	#efefef;
	color:			#333333;
	font-family: 		verdana, arial, helvetica, sans-serif;
	font-size:		12px;
	font-weight:		normal;
	text-align:		left;
	vertical-align:		top;
	border-width:		1px 1px 1px 1px;
	border-color:		#333333 #333333 #333333 #333333;
	border-style:		solid;
}
#capolettera{
	width:				200px;
	height:				150px;
	margin:				20px 0px 0px 0px;
	padding:			10px;
	overflow:			auto;
	font-family:	verdana, arial, helvetica, sans-serif;
	font-size:			12px;
	background-color:		#050505;
	color:				#808080;
	border-width:			1px 1px 1px 1px;
	border-color:			#202020;
	border-style:			solid;
	scrollbar-arrow-color:		#550000;
	scrollbar-face-color:		#050505;
	scrollbar-track-color:		#000000;
	scrollbar-highlight-color:	#202020;
	scrollbar-shadow-color:		#202020;
	scrollbar-3dlight-color:	#000000;
	scrollbar-darkshadow-color:	#000000;
}
#capolettera:first-letter{
	color:					#336611;
	font-size:				300%;
	font-style:				italic;
	font-weight:				bold;
	float:					left;
}
-->
</style>
</head>
<body>
<div class="mioLayer">
ecco il layer<br>
Loren ipsum loquitor ab virumque et puliment . Binut quo vadis. Arma
virum canto, trojae qui primus.Loren ipsum loquitor ab virumque et
puliment . Binut quo vadis. Arma virum canto, trojae qui primus. virum
canto, trojae qui primus.Loren ipsum loquitor ab virumque et puliment .
Binut quo vadis. Arma virum canto, trojae qui primus.
</div>
<div id="capolettera">
ecco il layer<br>
Loren ipsum loquitor ab virumque et puliment . Binut quo vadis. Arma
virum canto, trojae qui primus.Loren ipsum loquitor ab virumque et
puliment . Binut quo vadis. Arma virum canto, trojae qui primus. virum
canto, trojae qui primus.Loren ipsum loquitor ab virumque et puliment .
Binut quo vadis. Arma virum canto, trojae qui primus.
</div>
</body>
</html>
In questo caso ti rimando alla documentazione esistente in rete.
Inizia da
http://www.blooberry.com/indexdot
e scegli la sezione css.
Ciao!
Daniele