Suppongo che tu stia parlando di pagine web, nel cui caso è la combinazione standard HTML + CSS + Javascript. Quando si lavora con i clic sono abbastanza sicuro che Javascript sia necessario, se andasse bene anche visualizzare il menu quando si passa sopra a un elemento il tutto si può gestire anche in CSS puro giocando a dovere con gli :hover ma rischia di diventare un po' complesso. In ogni caso comunque la sintassi di Javascript è abbastanza affine alla famiglia del C++ (cicli for, while, do/while, blocchi definiti da parentesi graffe, funzioni invocate con argomenti tra parentesi tonde, non conoscendo il C++ posso confrontare con C e Java ma la famiglia dovrebbe essere comunque la stessa) con diversi metodi per accedere facilmente alla struttura della pagina, quindi non dovrebbe essere troppo difficile da imparare.
Un codice completo ed esatto per quello che chiedi può essere un filo complicato anche a seconda della struttura della pagina, ma i concetti di base dovrebbero essere questi:
- Assegnare un id all'oggetto da visualizzare.
Codice:
<div id="es">Contenuto</div>
Questo permette di accedere direttamente all'elemento dal codice Javascript:
Codice:
var esempio = document.getElementById("es");
("var" indica una variabile, Javascript NON distingue esplicitamente i tipi di variabili come numero, carattere o stringa)
- Assegnare all'oggetto uno stile adatto per definirne il posizionamento e il fatto che debba essere nascosto. Ad esempio qualcosa del genere (in CSS):
Codice:
#es {
position: absolute;
top: 100px;
left: 200px; /*valori arbitrari*/
display: none; /*questo dice che l'elemento di base non viene mostrato, in alternativa va bene anche visibility: hidden;*/
}
Consiglio di fare molta attenzione al posizionamento, quello indicato qui va bene solo se tutti gli elementi del menu, header e simili hanno dimensioni ben note (credo ci siano metodi più eleganti e più resistenti alle modifiche, ma non sono particolarmente esperto di dettagli di layout CSS).
- Dire al link/immagine di visualizzare l'elemento quando cliccato:
Codice:
<a href="javascript:document.getElementById('es').style.display='block';"><img src="..." /></a>
Oppure, in modo equivalente:
Codice:
<a href="#" onclick="document.getElementById('es').style.display='block';"><img src="..." /></a>
Se non sbaglio è possibile anche usare onclick (che significa "quando si clicca qui fai questo", se non si era capito) direttamente nel tag img, anche se personalmente preferisco il primo metodo (con href). Se si è usato visibility: hidden nel CSS allora qui si deve usare visibility: visible. In Javascript " e ' sono indifferenti, basta solo fare attenzione ad evitare conflitti quando si inserisce nel codice HTML (che è il motivo per cui qui sopra ho usato i ' all'interno).
- Fare in modo che il blocco venga nascosto quando si clicca all'esterno. Se non sbaglio qui è sufficiente inserire nella dichiarazione del corpo della pagina questo:
Codice:
<body onclick="document.getElementById('es').style.display='none'>
(NOTA: non garantisco che non dia problemi quando si clicca all'interno del blocco appena visualizzato, in più non sono del tutto sicuro su questa parte)
In ogni caso, sarebbe opportuno non utilizzare metodi simili per funzioni fondamentali dato che Javascript disattivato da lato utente pregiudicherebbe l'accesso. Non garantisco al 100% sul funzionamento del tutto, se proprio consiglio di controllare qualche guida a Javascript (che ripeto, non è particolarmente complesso per operazioni come queste).
In più, il metodo dell'esempio non è adatto se sono presenti più blocchi con questo comportamento (ad esempio in una barra dei menu), dato che diventa necessario nasconderli tutti. In questo caso, può avere senso definire il tutto in questo modo, ovviamente mettendo i pezzi nei punti giusti:
- Link che fa apparire il blocco:
Codice:
<a href="javascript:mostra('es')><img...></a>
dove es è l'id del blocco collegato a questo link in particolare (per la funzione vedi dopo)
- Blocco:
Codice:
<div id="es" class="damostrare">...</div>
dove la classe sarebbe comune a tutti i blocchi con questo comportamento. Non ricordo bene, ma purtroppo mi pare che impostare la visiblità a livello di classe possa creare problemi con Javascript.
- Funzioni Javascript (mi pare si debba inserire il blocco in coda alla pagina, o almeno dopo tutti i blocchi):
Codice:
<script type="text/javascript">
//questo è un commento
//funzione che mostra il singolo blocco
function mostra(id) {
document.getElementById(id).style.display="block"; //come sopra
}
//nasconde tutti gli elementi
function nascondiTutti() {
var damostrare = document.getElementByClassName("damostrare"); //NOTA: non sono sicuro della compatibilità di questa funzione con i vari browser.
for (i in damostrare) { //o alternativamente (i=0;i<damostrare.length;i++)
damostrare[i].style.display="none";
}
}
document.onclick=nascondiTutti; //dovrebbe nascondere tutto quando di clicca in un qualsiasi punto della pagina. La mancanza di parentesi non è un errore.
document.onload=nascondiTutti; //se proprio si vuole essere sicuri che Javascript legga correttamente la proprietà di visualizzazione anche se non è inserita nel CSS
</script>
Ribadisco, non garantisco sulla correttezza del codice ma le idee di base dovrebbero essere queste (è un po' che non lavoro su Javascript in questo modo). Invito comunque per approfondiere a guardarsi qualche guida a Javascript e al DOM (cito
W3Schools) dato che non è particolarmente difficile e può diventare molto utile.
