CREARE UNA MAPPA INTERATTIVA

Attenzione: Prima di iniziare questo tutorial devi aver completato il
tutorial sulle aree sensibili.

E' anche importante aver preso dimestichezza con la realizzazione di
aree sensibili con Dreamweaver

Vediamo il risultato finale:


Questa pagina contiene un elemento chiamato DIV di norma invisibile che viene visualizzato solo al passaggio del mouse sulla mia area sensibile.

La cosa veramente interessante è che all'interno del DIV posso mettere immagini, collegamenti e qualsiasi tag HTML.

1- Creazione di un DIV
Seleziona barra degli strumenti "Layout" dal menu a tendina che sta subito sotto al menu file (di default è visualizzata la barra degli strumenti Comune).

Clicca sull'icona Disegna Livello e trascina un rettangolo nella porzione di pagina che preferisci.
Io ho scelto di inserire il mio Div proprio sopra all'immagine, ma avrei potuto inserirlo in qualsiasi punto della pagina.

2- Personalizzazione del DIV

A questo punto puoi inserire all'interno del rettangolo che hai creato il tuo testo.
Puoi inserire anche un'immagine, un collegamento o un'immagine di sfondo, non c'è davvero limite a quello che puoi inserire all'interno del DIV!

Una delle caratteristiche del div è quella di poter essere reso visibile o invisibile attraverlo l'attributo visible.
Clicca col destro sulla linguetta del div e seleziona Visibilità>Nascosto.

Il nostro DIV è apparentemente sparito, ma non ti preoccupare: è proprio quello che volevamo, dato che al caricamento della pagina non deve essere mostrato.

3- Impostare un comportamento per il Div

- Seleziona l'area sensibile sopra alla scritta "Enter"

- Apri la finestra "Ispezione Tag" (Finestra > Finestra di Ispezione Tag oppure F9) quindi scegli la linguetta Comportamenti.

Premi l'iconcina + dal menu Comportamenti e scegli "Mostra-Nascondi Livelli".

Nella finestrella che si apre scegli "Livello 1 >Mostra"


E' stato creato un nuovo Comportameto per l'area sensibile che mostra il Livello 1 ed è stato associato automaticamente all'evento onMouseOver. Questo significa che il livello verrà reso visibile ogni volta che passo con il mouse sopra all'area sensibile.


Per completare l'effetto però dobbiamo creare un secondo comportamento che nasconde il div quando il mouse esce fuori dall'area sensibile.

4 - Creare un secondo Comportamento
Ripeti il passo precedente per creare un secondo comportamento, questa volta scegli:
Mostra-Nascondi Livelli > Nascondi

Dopo aver creato il comportamento devi cambiare l'evento associato, che naturalmente non sarà più onMouseOver ma onMouseOut

E' tutto!
Prova la tua pagina nel Browser per vedere se tutto funziona correttamente.

In maniera simile puoi assegnare differenti comportamenti ai vari elementi della tua pagina (non solo alle aree sensibili).

:P purtroppo il livello disegnato in questo modo è difficile da posizionare, e si sposta a seconda della dimensione della finestra che lo ospita...

Segnala un errore