Mappe immagine

Ultimo aggiornamento il 25 set 2023

Scopri come utilizzare le mappe immagine in Dreamweaver per creare punti attivi interattivi per il tuo 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.

Nota

Per utilizzare gli hotspot in Dreamweaver, devi essere attiva la vista Progettazione. 

Inserire mappe immagine client-side

Quando inserisci una mappa immagine client-side, crei un punto attivo e quindi definisci un collegamento che viene attivato quando un utente fa clic sul punto attivo.

Nota

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

Nella finestra del documento, seleziona l'immagine.
Per visualizzare tutte le proprietà, fai clic sulla freccia di espansione situata nell'angolo inferiore destro della finestra di ispezione Proprietà.

Nel campo Mappa, inserisci un nome univoco per la mappa immagine. Se stai utilizzando più mappe immagine nello stesso documento, assegna a ogni mappa un nome univoco.

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

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

  • Seleziona lo strumento poligono e definisci un punto attivo di forma irregolare facendo clic su ogni angolo del poligono. Fai clic sullo strumento freccia per chiudere la forma.

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

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

Dall'elenco a discesa Destinazione, seleziona la finestra in cui il file verrà aperto oppure digita il nome del file.

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. Puoi 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.  

Nella casella Alt, digita 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.
Ripeti i punti da 4 a 7 per definire dei punti attivi aggiuntivi nella mappa immagine.
Una volta completata la mappatura dell'immagine, fai 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. Puoi 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

Seleziona un punto attivo usando lo strumento Punto attivo.
Effettua una delle operazioni seguenti:
  • Fai clic tenendo premuto il tasto Maiusc sugli altri punti attivi che desideri selezionare.

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

Spostare un punto attivo

Seleziona un punto attivo usando lo strumento Punto attivo.
Effettua una delle operazioni seguenti:
  • Trascinate il punto attivo in un'area diversa.

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

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

Ridimensionare un punto attivo

Seleziona un punto attivo usando lo strumento punto attivo Puntatore .
Modifica la dimensione o la forma del punto attivo trascinando una maniglia di selezione.