Lo script che presentiamo è una realizzazione di Sharon Paine per Dynamic Web Coding. Consente la creazione e l'attivazione di piccoli menu contestuali a comparsa attivati al passaggio del mouse sopra un qualunque link contenuto nella pagina. La visualizzazione dell'esempio suggerirà ad ognuno i possibili ambiti di applicazione.
Lo script si compone di uno script in formato js da collegare alla pagina, di una sezione JavaScript presente nella sezione <head></head> della pagina, di una serie di regole CSS e di una serie di richiami all'interno della parte HTML.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
Passiamo subito alla spiegazione. Non ci soffermeremo sull'analisi del codice Javascript, poichè per il funzionamento dello script tutto può essere lasciato intatto. Ai fini di un utilizzo in una propria pagina, infatti, è importante soprattutto capire dove intervenire per personalizzare l'aspetto dei menu. I punti critici sono evidenziati con commenti nell'esempio allegato.
Per prima cosa si dovrà collegare al documento il file .js esterno 'dw_viewport.js':
<script src="dw_viewport.js" type="text/javascript"></script>
Segue una lunga sezione Javascript incorporata. Serve essenzialmente a gestire il posizionamento dei menu rispetto al cursore del mouse e alla finestra. Salvo che nei punti commentati ed evidnziati può essere lasciata intatta.
## 2: LA SEZIONE CSS
Fondamentale è la parte CSS che precede l'inclusione di Javascript. Sono una serie di regole in grado di definire l'aspetto dei menu, oltre che del testo e dei link in esso contenuti. Per poter adattare il tutto al layout della nostra pagina è richiesta quindi la conoscenza delle basi della formattazione con i fogli di stile. Anche in questo caso i commenti aiuteranno ad orientarsi nelle sezioni principali.
## 3: LA SEZIONE HTML
Veniamo alla parte HTML. Per prima cosa è importante comprendere dove sono i menu. Al momento di caricare la pagina essi saranno invisibili, cosa che avviene tramite la proprietà 'visibility:hidden' definita a livello di CSS. Devono però essere presenti, ovviamente, nel corpo della pagina. La posizione migliore, quella dell'esempio, è il fondo della pagina, giusto prima del tag di chiusura </body>.
Si tratta di div a cui è necessario assegnare un id e una classe. L'id dovrà essere unico, la classe dovrà essere invece per tutti 'menù. Al suo interno potremo piazzare ciò che vogliamo, anche immagini.
Per attivare i menu dovremo invece agire sui link. Ecco il codice dell'esempio:
<a href="javascript:;" onmouseover="menuLayers.show('menu1', event)" onmouseout="menuLayers.hide()">link</a>
Come si vede, sarà necessario richiamare con l'evento onmouseover la funzione 'menuLayers.show' passando come parametri l'id del menu da mostrare e la parola chiave 'event'. Con l'evento onmouseout, invece, faremo in modo di nascondere nuovamente il menu, richiamando la funzione 'menuLayers.hide()'.
