Avete presente l'effetto di onClick o OnMouseOver che permette lo switch tra due div?? Mi spiego meglio... supponiamo che vogliate realizzare una navigazione di alcune pagine di un sito senza però cambiare mai pagina: come si può fare??

Il modo migliore è quello di usare i div giocando con le proprietà position e z-index: vediamo a cosa servono.

Position: in genere si utilizza relative, per fare in modo che il div sia visualizzato nella posizione in cui l'abbiamo inserito, ed absolute, per gestire il div come un elemento "fluttuante" la cui posizione all'interno della pagina è fornita tramite coordinate in px (i classici top e left)

Z-index: come già si intuisce facilmente, permette di gestire i div come se avessimo disponibile la terza dimensione nelle nostre pagine web, data dalla linea di vista perpendicolare dell'utente sullo schermo. Uno z-index negativo corrisponde a nascondere il div, uno positivo lo rende visibile. E' visibile ovviamente quello con Z maggiore.

A questo punto il gioco è semplice: sui miei due link inserisco nell'href la chiamata al mio javascript passandogli come parametro l'ID del div che voglio rendere visibile. Al caricamento della pagina faccio in modo che un div sia quello di default.

<a href="javascript:switchDiv('Div1')" class="menu">Div 1</a>
<a href="javascript:switchDiv('Div2')" class="menu">Div 2</a>

Questo il javascript:

<script language="javascript">

var currentDiv = "";

function loadDiv() {
 if (currentDiv == ""){
  currentDiv = "Div1";
 }
}

function switchDiv(newdiv){

 document.getElementById(currentDiv).style.zIndex = -1;
 document.getElementById(newdiv).style.zIndex = 1;
 
 currentDiv = newdiv;
}

</script>

Infine i div:

<div id="Div1" style="width:450px; height:380px; position:absolute; z-index:1; top: 198px;">Ecco il Div 1</div>
<div id="Div2" style="width:450px; height:380px; position:absolute; z-index:-1; top: 198px;">Ecco il Div 2</div>

Fatto... alla prossima!!