Mappa immagine
This presentation is the property of its rightful owner.
Sponsored Links
1 / 17

MAPPA IMMAGINE PowerPoint PPT Presentation


  • 98 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

MAPPA IMMAGINE

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Mappa immagine

MAPPA IMMAGINE

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


Immagini attive

IMMAGINI ATTIVE

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


Mappa immagine1

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

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


Mappa immagine

  • 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

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


Mappa immagine

  • 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


Mappa immagine

  • 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

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


Mappa immagine

  • 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

COMPORTAMENTO DEI LIVELLI

Collegare al passaggio del puntatoresu un punto attivo la visione del testo corrispondente


Comportamento dei livelli1

COMPORTAMENTO DEI LIVELLI

  • Finestra - Comportamenti

  • Selezionare il primo punto attivo

  • Clic sul pulsante + sul pannello Comportamenti

  • Clic Mostra-nascondielementi


Mappa immagine

  • Nella finestra Mostra-nascondi elementi - selezionareinfospedale - pulsante Mostra - OK

  • Pannello Comportamenti - aonMouseOvercorrisponde 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


Mappa immagine

  • 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

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


Mappa immagine

  • 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

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


  • Login