MAPPA IMMAGINE

Imparare a realizzare una mappa immagine e a creare/gestire i livelli.

IMMAGINI ATTIVE

• Si possono rendere delle immagini “attive” con degli opportuni strumenti e sfruttandole in modo interattivo.

MAPPA IMMAGINE

• Utilizzando una singola immagine è possibile realizzare dei collegamenti da specifiche aree dell’immagine a ulteriori pagine, file o indirizzi e-mail.

• Dopo aver reso un’immagine attiva il visitatore può far clic su un punto attivo dell’immagine per visualizzare le informazioni.

COME REALIZZARE UNA MAPPA IMMAGINE

• Aprire Dreamweaver• File - Aprire una pagina .html (es. Dove

siamo.html)• Pannello Inserisci - scheda Comune - pulsante

Immagini• All’apertura della finestra Seleziona file di

origine immagine indica il percorso dell’immagine nel campo Cerca in e premi OK

• All’apertura della finestra Attributi di accessibilità tag dell’immagine - inserisci nel campo Testo alternativo una breve descrizione dell’immagine (Mappa-Riccione.jpg) - OK

• Aprendo la cartella immagini essa contiene il file dell’immagine Mappa-Riccione.jpg

• Ora è pronta per essere elaborata

CREAZIONE DEI PUNTI ATTIVI

• Selezionare l’immagine facendo clic su di essa per renderla attiva

• La finestra Proprietà contiene tre pulsanti per la definizione dei punti attivi (selezionare uno di essi):

• Strumento punto attivo Rettangolo: punto attivo di forma rettangolare

• Strumento punto attivo Ovale: punto attivo di forma ovale

• Strumento punto attivo Poligono: forma irregolare

• Spostare il cursore sull’immagine (assume la forma di un puntatore)

• Tracciare il contorno dell’immagine• Proprietà - Clic sul pulsante Strumento punto

attivo Puntatore• Clic sull’immagine in un punto esterno

dell’area attiva per deselezionarla• Fare la stessa operazione per creare un’altra

area attiva

• Proprietà - campo Mappa - assegnare nome alla Mappa (es. Map)

• Selezionare un’area attiva - Proprietà - campo Alt (testo alternativo) e digitare il nome corrispondente (il testo inserito verrà visualizzato nel browser quando il cursore passerà sopra l’area attiva)

• Ripetere le stesse operazioni per le altre figure• Salva la pagina e visualizza l’anteprima nel

browser

ELEMENTI

• Aprire la pagina Dove siamo.html• Inserisci - scheda Layout - Disegna div PA• Posizionare il pulsante alla destra

dell’immagine per creare un livello rettangolare come in figura

• Clic all’interno del livello - inserire del testo che riporti delle informazioni sul punto attivo

• Clic sulla linguetta per selezionare il livello e visualizza gli strumenti relativi nella finestra Proprietà

• Campo Elemento CSS-P il nome dell’elemento (es. infospedale)

• Proprietà - Col sfondo - scegli un colore da assegnare allo sfondo del livello

• Ripetere la stessa operazione anche per gli altri punti attivi collocando il livello di fianco al primo

• Salvare la pagina e visualizzare l’anteprima del browser

COMPORTAMENTO DEI LIVELLI

Collegare al passaggio del puntatore su un punto attivo la visione del testo

corrispondente

COMPORTAMENTO DEI LIVELLI

• Finestra - Comportamenti• Selezionare il primo punto attivo• Clic sul pulsante + sul pannello

Comportamenti• Clic Mostra-nascondi elementi

• Nella finestra Mostra-nascondi elementi - selezionare infospedale - pulsante Mostra - OK

• Pannello Comportamenti - a onMouseOver corrisponde l’azione Mostra livello (es. livello infospedale)

• Seleziona il punto attivo dell’immagine - clic sul pulsante + - Mostra-nascondi elementi

• Mostra-nascondi elementi - infospedale - Nascondi - OK

• Selezionare la voce da modificare - Clic sulla freccia rivolta verso il basso.

• All’apertura del menù selezionare la voce onMouseOut.

• Ripetere le operazione per tutti gli altri punti attivi.

SOVRAPPORRE GLI ELEMENTI

• Menù Visualizza - Griglia - Mostra Griglia• Verificare segno di spunta accanto alla Griglia

calamitata• Il documento presenterà una griglia

comportandosi come una calamita• Clic sulla linguetta del primo livello di

informazioni spostandolo vicino alle linee della griglia

• Trascinare il secondo livello sul piano sopra il primo

• Gli elementi sono sovrapposti • Per ridimensionare un livello è necessario

visualizzarlo Finestra - Elementi PA – Clic sul nome da visualizzare

NASCONDERE GLI ELEMENTI

• Clic - voce infospedale (presente nel pannello PA)• Proprietà - campo Vis (visibilità) - voce hidden

(per nascondere l’elemento)• Ripetere le stesse operazione per gli altri

elementi• Salvare la pagina e visualizzare l’anteprima del

browser