Utilizzare le mappe immagine in Dreamweaver per creare punti attivi interattivi per il sito web.

Una mappa immagine è un'unica immagine suddivisa in diverse sezioni chiamate punti attivi: quando un utente fa clic su un punto attivo, si verifica un'azione, ad esempio viene aperto un file.

Le mappe immagine client-side salvano le informazioni dei collegamenti ipertestuali nel documento HTML e non in un file mappa separato, come nel caso delle mappe immagine server-side. Quando un utente del sito fa clic su un punto attivo dell'immagine, l'URL ad esso associato viene inviato direttamente al server. Per questo motivo, le mappe immagine client-side assicurano una maggiore velocità rispetto alle mappe immagine server-side, poiché il server non deve determinare dove ha fatto clic il visitatore del sito. 

Dreamweaver non modifica in alcun modo i riferimenti alle mappe immagine server-side contenuti nei documenti esistenti; infatti potete utilizzare sia le mappe immagine client-side che quelle server-side nello stesso documento. Tuttavia, se un browser supporta entrambi i tipi di mappa immagine, la precedenza potrebbe essere data a quelle client-side. Per includere una mappa immagine server-side in un documento, è necessario scriverne il codice HTML.

Inserire mappe immagine client-side

Quando inserite una mappa immagine client-side, create un punto attivo e quindi definite un collegamento che viene attivato quando un utente fa clic sul punto attivo.

Nota:

potete creare più punti attivi, ma tutti appartenenti alla stessa mappa immagine.

  1. Nella finestra del documento, selezionate l'immagine.
  2. Per visualizzare tutte le proprietà, fate clic sulla freccia di espansione situata nell'angolo inferiore destro della finestra di ispezione Proprietà.
  3. Nel campo Mappa, inserite un nome univoco per la mappa immagine. Se state utilizzando più mappe immagine nello stesso documento, assegnate a ogni mappa un nome univoco.

  4. Per definire le aree della mappa immagine, effettuate una delle seguenti operazioni:
    • Selezionate lo strumento cerchio e trascinate il puntatore sull'immagine per creare un punto attivo circolare.

    • Selezionate lo strumento rettangolo e trascinate il puntatore sull'immagine per creare un punto attivo rettangolare.

    • Selezionate lo strumento poligono e definite un punto attivo di forma irregolare facendo clic su ogni angolo del poligono. Fate clic sullo strumento freccia per chiudere la forma.

      Una volta creato il punto attivo, viene visualizzata la finestra di ispezione del punto attivo.

  5. Nel campo Collegamento, fate clic sull'icona della cartella per individuare e selezionare il file che deve essere aperto quando l'utente fa clic sul punto attivo, oppure digitatene il percorso.

  6. Dall'elenco a discesa Destinazione, selezionate la finestra in cui il file verrà aperto oppure digitatene il nome.

    Nell'elenco a discesa appaiono i nomi di tutti i frame denominati nel documento corrente. Se il frame specificato non esiste, la pagina collegata viene caricata in una nuova finestra, a cui è assegnato il nome specificato dall'utente. Potete scegliere anche i seguenti nomi di destinazione riservati:

    • _blank carica il file collegato in una nuova finestra del browser senza nome.
    • _parent carica il file collegato nel set di frame o nella finestra superiore del frame che contiene il collegamento. Se il frame in cui si trova il collegamento non è nidificato, il file collegato viene caricato nella finestra del browser a grandezza piena.
    • _self carica il file collegato nello stesso frame o nella stessa finestra in cui si trova il collegamento. Questo collegamento è predefinito e quindi non è generalmente necessario specificarlo.
    • _top carica il file collegato nella finestra del browser a grandezza piena, eliminando tutti i frame.
    • _new carica il file collegato in una nuova finestra del browser.

    Nota:

    l'opzione Destinazione non è disponibile fino a quando il punto attivo selezionato non contiene un collegamento.  

  7. Nella casella Alt, digitate il testo da visualizzare come testo alternativo per i browser che non supportano la modalità grafica o configurati per lo scaricamento manuale delle immagini. Alcuni browser visualizzano questo testo come una descrizione comandi che viene visualizzata quando l'utente posiziona il puntatore del mouse sopra il punto attivo.
  8. Ripetere i punti da 4 a 7 per definire dei punti attivi aggiuntivi nella mappa immagine.
  9. Una volta completata la mappatura dell'immagine, fate clic sull'area vuota del documento per modificare la finestra di ispezione Proprietà.

Modificare i punti attivi di una mappa immagine

I punti attivi creati in una mappa immagine possono essere modificati in modo semplice. Potete spostare un punto attivo, ridimensionarlo o spostarlo avanti o indietro all'interno di un elemento PA (con posizione assoluta).

Le immagini dotate di punti attivi possono essere copiate da un documento a un altro e i punti attivi possono essere copiati, singolarmente o collettivamente, da un'immagine a un'altra. I punti attivi associati a un'immagine vengono copiati insieme all'immagine.

Selezionare più punti attivi in una mappa immagine

  1. Selezionate un punto attivo usando lo strumento Punto attivo.
  2. Effettuate una delle operazioni seguenti:
    • Fate clic tenendo premuto il tasto Maiusc sugli altri punti attivi che desiderate selezionare.

    • Premete Ctrl+A (Windows) o Comando+A (Macintosh) per selezionare tutti i punti attivi.

Spostare un punto attivo

  1. Selezionate un punto attivo usando lo strumento Punto attivo.
  2. Effettuate una delle operazioni seguenti:
    • Trascinate il punto attivo in un'area diversa.

    • Usate la combinazione Ctrl+tasti freccia per spostare il punto attivo di 10 pixel nella direzione scelta.

    • Usate i tasti freccia per spostare il punto attivo di 1 pixel nella direzione scelta.

Ridimensionare un punto attivo

  1. Selezionate un punto attivo usando lo strumento punto attivo Puntatore .
  2. Modificate la dimensione o la forma del punto attivo trascinando una maniglia di selezione.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online