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

Presentazione sul tema: "MAPPA IMMAGINE Imparare a realizzare una mappa immagine e a creare/gestire i livelli."— Transcript della presentazione:

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

2 IMMAGINI ATTIVE Si possono rendere delle immagini attive con degli opportuni strumenti e sfruttandole in modo interattivo.

3 MAPPA IMMAGINE Utilizzando una singola immagine è possibile realizzare dei collegamenti da specifiche aree dellimmagine a ulteriori pagine, file o indirizzi e-mail. Dopo aver reso unimmagine attiva il visitatore può far clic su un punto attivo dellimmagine per visualizzare le informazioni.

4 COME REALIZZARE UNA MAPPA IMMAGINE Aprire Dreamweaver File - Aprire una pagina.html (es. Dove siamo.html) Pannello Inserisci - scheda Comune - pulsante Immagini Allapertura della finestra Seleziona file di origine immagine indica il percorso dellimmagine nel campo Cerca in e premi OK

5 Allapertura della finestra Attributi di accessibilità tag dellimmagine - inserisci nel campo Testo alternativo una breve descrizione dellimmagine (Mappa-Riccione.jpg) - OK Aprendo la cartella immagini essa contiene il file dellimmagine Mappa-Riccione.jpg Ora è pronta per essere elaborata

6 CREAZIONE DEI PUNTI ATTIVI Selezionare limmagine 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

7 Spostare il cursore sullimmagine (assume la forma di un puntatore) Tracciare il contorno dellimmagine Proprietà - Clic sul pulsante Strumento punto attivo Puntatore Clic sullimmagine in un punto esterno dellarea attiva per deselezionarla Fare la stessa operazione per creare unaltra area attiva

8 Proprietà - campo Mappa - assegnare nome alla Mappa (es. Map) Selezionare unarea attiva - Proprietà - campo Alt (testo alternativo) e digitare il nome corrispondente (il testo inserito verrà visualizzato nel browser quando il cursore passerà sopra larea attiva) Ripetere le stesse operazioni per le altre figure Salva la pagina e visualizza lanteprima nel browser

9 ELEMENTI Aprire la pagina Dove siamo.html Inserisci - scheda Layout - Disegna div PA Posizionare il pulsante alla destra dellimmagine per creare un livello rettangolare come in figura Clic allinterno del livello - inserire del testo che riporti delle informazioni sul punto attivo

10 Clic sulla linguetta per selezionare il livello e visualizza gli strumenti relativi nella finestra Proprietà Campo Elemento CSS-P il nome dellelemento (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 lanteprima del browser

11 COMPORTAMENTO DEI LIVELLI Collegare al passaggio del puntatore su un punto attivo la visione del testo corrispondente

12 COMPORTAMENTO DEI LIVELLI Finestra - Comportamenti Selezionare il primo punto attivo Clic sul pulsante + sul pannello Comportamenti Clic Mostra-nascondi elementi

13 Nella finestra Mostra-nascondi elementi - selezionare infospedale - pulsante Mostra - OK Pannello Comportamenti - a onMouseOver corrisponde lazione Mostra livello (es. livello infospedale) Seleziona il punto attivo dellimmagine - clic sul pulsante + - Mostra-nascondi elementi Mostra-nascondi elementi - infospedale - Nascondi - OK

14 Selezionare la voce da modificare - Clic sulla freccia rivolta verso il basso. Allapertura del menù selezionare la voce onMouseOut. Ripetere le operazione per tutti gli altri punti attivi.

15 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

16 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

17 NASCONDERE GLI ELEMENTI Clic - voce infospedale (presente nel pannello PA) Proprietà - campo Vis (visibilità) - voce hidden (per nascondere lelemento) Ripetere le stesse operazione per gli altri elementi Salvare la pagina e visualizzare lanteprima del browser