mappa immagine n.
Download
Skip this Video
Download Presentation
MAPPA IMMAGINE

Loading in 2 Seconds...

play fullscreen
1 / 17

MAPPA IMMAGINE - PowerPoint PPT Presentation


  • 146 Views
  • Uploaded on

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'MAPPA IMMAGINE' - fleur


Download Now 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
slide5

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
slide7

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
slide8

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
slide10

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
slide13

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
slide14

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
slide16

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