Assegnare una classe ad un elemento HTML è ovviamente una cosa molto semplice, ma spesse volte abbiamo bisogno di variare dinamicamente lo stile di un oggetto HTML, ad esempio a seguito di eventi come “onmouseover” o “onclick” .

Supponiamo ad esempio di voler gestire l’apparizione di due div, creando una sorta di menu. L’esempio che vogliamo realizzare è visibile qui.

Non soffermiamoci su come sono implementate le classi CSS: l’unica istruzione importante da tenere presente per le classi dei div che contenugono il testo è il valore di default display:none; , che appunto di default permette di nacondere il contenuto dei div in questione.

La tecnica per realizzare un menu di questo tipo è in realtà molto semplice: quando con il cursore ci troviamo sopra uno dei due link di menu ( “primo” o “secondo”, per interderci ), viene attivato l’evento javascript “onmouseover“, attraverso il quale richiamiamo la funzione “openDiv“.

Questa funzione non fa altro che settare alcune direttive in base al link menu in cui il cursore si trova: analizziamo il primo caso, il secondo è sostanzialmente uguale.

Nel primo caso, quando cioè il mouse si trova sul link menu “primo”, la funzione javascript “openDiv” setta i seguenti parametri:

document.getElementById(id).className = ‘submenu_sfondo_S’;
document.getElementById(‘submenu_01′).style.display = ‘inline’;
document.getElementById(‘secondo’).className = ‘submenu_S’;
document.getElementById(‘submenu_02′).style.display = ‘none’;

La prima riga è la più importante, perchè è quella che di occupa di cambiare il valore dell’attributo class del div di riferimento, ovvero di cambiare la classe di stile per l’elemento (id) passato come parametro. La successiva riga non fa altro che impostare l’attributo display sul valore ‘inline‘ , in modo da visualizzare il contenuto del div corrispondente al link menu passato come parametro. Le ultime due righe compiono sostanzialmente i passi complementari sull’altro div (si imposta la classe css senza lo sfondo e si nasconde il div), in modo da creare l’effetto di alternanza.

Per chi avesse ancora dubbi, può rivedere il codice dell’esempio seguendo questo link.