Creare mappe immagine

Una mappa immagine è un’area su un’immagine, una pagina di eCatalog o un’immagine di un set 360 gradi, che visualizza un pannello di rollover con del testo. Quando l’utente seleziona una mappa immagine, viene attivata un’azione di qualche tipo. Ad esempio, può essere avviata una pagina Web contenente ulteriori informazioni su un prodotto. Quando l’utente sposta il puntatore su una mappa immagine, viene visualizzato un contorno intorno a una mappa immagine.

Oltre alla possibilità di creare mappe immagine in Adobe Dynamic Media Classic, è anche possibile creare mappe immagine quando si progetta un catalogo in Adobe Acrobat o Adobe InDesign.

Quando create le mappe immagine, potete effettuare una delle seguenti operazioni:

  • Immettere testo di rollover.
  • Immettere JavaScript e URL per avviare pagine Web.
  • Creare modelli URL per le mappe immagine.
  • Copiare le mappe immagine in altre immagini, pagine di eCatalog o set 360 gradi.
  • Esportare le mappe immagine in CSV o XML.
  • Importa metadati immagine da un file delimitato da tabulazioni o da un file XML.
  • Definire altre azioni secondo quanto stabilito dal World Wide Web Consortium.
  • Visualizzare l’anteprima delle mappe immagine.

Disegnare e regolare una mappa immagine

  1. Effettuate una delle seguenti operazioni:

    • Se si lavora con un'immagine nella Vista a griglia o nella Vista a elenco, nell'elenco a discesa Modifica selezionare Mappa immagine. In alternativa, aprilo in Vista dettagli e seleziona Mappa immagine sopra l'immagine.
    • Se si utilizza un Set 360 gradi nella visualizzazione Griglia o Elenco, selezionare Modifica. In alternativa, aprilo in Vista dettagli e seleziona Modifica. Seleziona una risorsa immagine, quindi seleziona Mappa immagine.
    • Se si utilizza un eCatalog, in Vista griglia, Vista elenco, Vista dettagli, selezionare Modifica. Seleziona la scheda Mappa pagine .

    Immagine mappa immagine

  2. Disegnate una mappa immagine rettangolare o poligonale:

    • Mappa rettangolare : seleziona lo strumento Mappa immagine rettangolare e trascina sulla pagina per creare il rettangolo. Per aggiungere un punto a una mappa rettangolare (cambiandola in una mappa poligonale), premere Ctrl, quindi posizionare lo strumento di inserimento nella posizione desiderata e selezionare.

    • Mappa poligonale : selezionate lo strumento Mappa immagine poligonale e selezionate i punti sul perimetro dell'area dell'immagine da racchiudere. Usate il cursore di densità del poligono per variare la densità dei punti nel poligono. La densità originale viene ricordata se selezionate altre mappe. Se un punto del poligono viene aggiunto, eliminato o spostato, la densità originale viene perduta e il cursore viene reimpostato sul valore massimo.

  3. Se lo desiderate, potete immettere un nome per la mappa immagine nell’elenco Mappa immagine. Dopo aver disegnato una mappa immagine, Adobe Dynamic Media Classic le assegna un nome.

    Per creare il nome, in Adobe Dynamic Media Classic viene aggiunto un numero sequenziale al nome dell’immagine o della pagina eCatalog con cui si sta lavorando. Potete immettere un nome di vostra scelta.

  4. Per aprire una nuova pagina web quando gli utenti selezionano la mappa immagine, immetti l’URL nell’elenco Mappa immagine.

    Consultate per inserire JavaScript e URL.

  5. Per visualizzare un testo di rollover quando gli utenti passano il puntatore su una mappa immagine, immettete il testo nell’elenco Mappa immagine. Nell'elenco Mappa immagine, selezionare il menu Mostra e selezionare Testo di rollover. A questo punto, immettete il testo che verrà presentato agli utenti. Potete scrivere il testo in un elaboratore testi e copiarlo nel campo di testo Rollover.

  6. Per attivare un’altra azione quando gli utenti passano il mouse su una mappa immagine, definite l’azione desiderata. Nell'elenco a discesa Mostra, selezionare Altre azioni. Immettete gli attributi dell’azione. (Vai a Mostra > Entrambi per creare un testo di rollover e un'azione per una mappa immagine.)

    Consulta Definire altre azioni per le mappe immagine.

  7. (Facoltativo) Effettuate una o più delle operazioni seguenti:

    • Per visualizzare in anteprima le mappe immagine, seleziona Anteprima.
    • Per eliminare una mappa immagine o un vertice poligonale, selezionare una forma sull'immagine, quindi selezionare Elimina. In alternativa, per un eCatalog, nella scheda Pagine ordine , seleziona Cancella mappe per rimuovere le mappe immagine da tutte le pagine.
    • Per rimuovere temporaneamente una mappa immagine da un’immagine, una pagina di eCatalog o un’immagine di un set 360 gradi senza eliminarla, deselezionate la relativa opzione Attivato nell’elenco Mappa immagine.
  8. Selezionare Salva.

Regolare la posizione, la forma e le dimensioni delle mappe immagine

Per cambiare posizione, forma e dimensione alla mappa immagine, fate clic sul pulsante Mappa immagine . Quindi, seleziona lo strumento Pan e segui queste istruzioni:

  • Cambia posizione : sposta il puntatore vicino al bordo della mappa immagine ma non sopra di esso. Quando viene visualizzata l’icona con la freccia a quattro punte, trascinate la mappa nella nuova posizione.

  • Modificare le dimensioni e la forma - La modalità di modifica della forma e delle dimensioni di una mappa immagine dipende dal fatto che si stia utilizzando una mappa immagine rettangolare o poligonale:

SUGGERIMENTO

Potete trascinare il cursore Dimensione in fondo alla schermata per cambiare le visualizzazioni e avere una visione migliore della mappa immagine.

  • Mappa immagine rettangolare : sposta il puntatore su un lato o un angolo della mappa immagine. Quando viene visualizzata l’icona con la freccia a due punte, iniziate a trascinare. Tenete premuto il tasto Maiusc mentre trascinate per cambiare le dimensioni ma mantenere le stesse proporzioni (forma).

  • Mappa immagine poligonale : consente di trascinare una maniglia di selezione quadrata. Per creare una maniglia di selezione, selezionate il bordo della mappa immagine e iniziate a trascinarla.

Gestire le mappe immagine sovrapposte

Se l’immagine o la pagina di eCatalog include più mappe immagine che si sovrappongono, potete gestirne la sovrapposizione cambiando l’ordine delle mappe nell’elenco Mappa immagine. Trascinate i nomi delle mappe verso l’alto o il basso nell’elenco. Le mappe immagine si sovrappongono l’una sull’altra in base all’ordine dei relativi nomi in questo elenco, dall’alto al basso.

Importare i dati per le mappe immagine

Invece di inserire i dati relativi alle mappe immagine in ciascuna pagina, potete importare i dati per l’immagine, il set 360 gradi o l’eCatalog nella schermata Riepilogo mappe. Potete importare i dati delle mappe immagine come un file delimitato da tabulazioni o un file XML DTD. I campi presenti nel file devono essere nell’ordine visualizzato nella schermata Riepilogo mappe: Nome, Etichette di sommario, Mappe, URL, Testo di rollover, Altre azioni e Stringhe di ricerca. Importando i dati delle mappe immagine si evita di dover inserire i dati nell’elenco delle mappe immagine durante la creazione di ciascuna mappa immagine.

Per importare i dati per le mappe immagine:

  1. Passate alla pagina Editor mappa immagine (per le immagini o le immagini in set 360 gradi) o alla scheda Mappe pagine della schermata di modifica di un eCatalog.
  2. Seleziona Importa metadati.
  3. Nella finestra di dialogo Carica metadati , seleziona Immagine o Mappa immagine per caricare i metadati dal tipo di proprietà desiderato.
  4. Dall’elenco a discesa Genera file, selezionate il tipo di file da creare.
  5. (Facoltativo) Seleziona Genera per visualizzare in anteprima i dati risultanti in base al tipo di file che desideri creare. Seleziona Chiudi per tornare alla finestra di dialogo Carica metadati.
  6. Individuate il file da caricare. Nel campo di testo Nome file, specificate il nome del file generato.
  7. (Facoltativo) Nel campo Nome processo, specificate un nome per il processo di caricamento dei metadati.
  8. Seleziona Carica.

Copia mappe immagine

Potete copiare le mappe immagine da un’immagine o una pagina di eCatalog all’altra, Utilizza Copia mappa immagine per ottenere un primo inizio nella creazione di tali immagini. È inoltre possibile copiare le mappe immagine per ricrearle in immagini o pagine che condividono il layout o la struttura di mappatura.

Ad esempio, può essere utile copiare tutte le mappe immagine di un eCatalog per le versioni nelle diverse lingue dello stesso eCatalog. Per risultati ottimali, si consiglia di copiare tra diversi eCatalog con lo stesso numero di pagine e le stesse immagini. Se l’eCatalog in cui copiate contiene già delle mappe immagine, queste vengono eliminate quando create la copia.

Per copiare le mappe immagine:

  1. Passate alla pagina Editor mappa immagine (per le immagini o le immagini in set 360 gradi) o alla scheda Mappe pagine della schermata di modifica di un eCatalog.

  2. Seleziona Copia mappe in.

  3. Per copiare le mappe immagine da altre immagini o per copiarle da un eCatalog, effettuate una delle seguenti operazioni:

    • (Immagini) Nella schermata Seleziona immagini, selezionate le immagini nelle quali desiderate copiare le mappe immagine.
    • (Immagini) Nella schermata Seleziona risorsa, selezionate le immagini o le pagine eCatalog nelle quali desiderate copiare le mappe immagine.
  4. Scegli Seleziona.

Utilizzare un modello per immettere JavaScript e URL

Potete definire un modello URL (detto anche modello Href) per facilitare e migliorare l’immissione degli URL delle mappe immagine. La definizione di un modello URL risulta utile se la maggior parte degli URL della mappa immagine hanno uno stesso formato fisso. Immettendo la parte fissa dell’URL come modello URL non sarà necessario reimmetterla ogni volta che create una mappa immagine. Il modello URL può contenere anche parametri, nomi di percorso e comandi JavaScript. Per impostazione predefinita, il modello URL contiene un gestore JavaScript proprietario di Adobe Dynamic Media Classic denominato loadProduct che apre l’immagine in una nuova finestra.

NOTA

Quando si aggiunge il codice JavaScript all'attributo HREF della mappa immagine, il codice viene eseguito sul computer del client. Assicurati pertanto che il codice JavaScript sia protetto.

I modelli URL

In un modello URL il contenuto della colonna URL nell’elenco Mappa immagine è sostituito da un doppio simbolo di dollaro (‘$$’):

Javascript:loadProduct(‘$$’);void(0);

Inserisci tutti i valori che non cambiano tra le mappe immagine nel modello URL. Nella colonna URL dell’elenco Mappa immagine vanno invece aggiunti solo i valori che variano da mappa immagine a mappa immagine. Ad esempio:

  • Modello URL - javascript:loadProduct(‘https://www.examplesitehere.com/$$’);void(0);
  • Valore URL - product.htm
  • URL effettivo generato - javascript:loadProduct(‘https://www.examplesitehere.com/product.html);void(0);

Per impostazione predefinita, il modello URL include un gestore JavaScript proprietario di Adobe Dynamic Media Classic denominato loadProduct che apre una nuova finestra con la destinazione URL. Tuttavia, è possibile utilizzare qualsiasi codice JavaScript per sostituire questo gestore JavaScript o utilizzare uno dei seguenti gestori Dynamic Media Classic di Adobe:

  • loadProductCW - visualizza la destinazione URL specificata nella colonna URL nella finestra corrente. Questo handler è indicato soprattutto per gli eCatalog integrati in una pagina di un sito Web.

  • loadProductPW - visualizza la destinazione URL specificata nella colonna URL nella finestra principale (la pagina che ha aperto quella corrente). La finestra corrente resta aperta, ma quella principale cambia per visualizzare la destinazione URL.

    NOTA

    L’handler loadProductPW non supporta i visualizzatori DHTML e HTML5.

Creare un modello URL

  1. Nella schermata Editor mappa (per le immagini e i set 360 gradi) o nella scheda Mappe pagine della schermata eCatalog (per gli eCatalog), selezionate Modifica accanto all’opzione Modello URL. Viene visualizzata la finestra di dialogo Modifica modello mappa.
  2. Immettete il codice JavaScript e l’URL completo (con la porzione variabile sostituita dai segni di dollaro [$$]). Per incollare il codice, fai clic con il pulsante destro del mouse e scegli Incolla.
  3. Selezionare Salva.

Gestire i modelli URL

La pagina Editor mappa (per le immagini e i set 360 gradi) e la scheda Mappe pagine della schermata eCatalog (per gli eCatalog) offrono i seguenti comandi per gestire i modelli URL:

  • Opzione Modello URL : seleziona l’opzione Modello URL per applicare il modello URL a tutte le mappe immagine di un’immagine o di una pagina di eCatalog.

  • Opzione Modello : deseleziona un’opzione Modello nell’elenco URL mappa immagine se non desideri che una singola mappa immagine utilizzi il modello URL.

Definire altre azioni per le mappe immagine

Puoi selezionare il menu Mostra e scegliere Altre azioni per attivare azioni diverse dal testo di rollover e dagli avvii delle pagine web. Potete fare sì che un’azione venga avviata quando l’utente passa il puntatore su una mappa immagine. Queste azioni sono attributi definiti per le mappe immagine sul lato client dalle specifiche HTML del World Wide Web Consortium. Includono:

  • accesskey - Attiva un’azione quando l’utente preme un determinato tasto della tastiera.

  • onfocus - Attiva un evento quando la mappa immagine viene messa a fuoco, tramite il cursore, la tabulazione o premendo un tasto di accesso. Ad esempio, è possibile avviare una pagina Web quando la mappa immagine viene resa attiva e chiuderla quando la mappa è resa inattiva.

  • onblur - Attiva un evento quando la mappa immagine viene resa inattiva tramite cursore o tasto di tabulazione.

Per definire altre azioni per le mappe immagine:

  1. Nella schermata Editor mappa (immagini e set 360 gradi) o nella scheda Mappa pagine della schermata eCatalog (eCatalogs), seleziona il menu Mostra e seleziona Altre azioni.
  2. Usando la sintassi indicata dalle specifiche HTML del World Wide Web Consortium, aggiungete gli attributi supportati nella colonna Altre azioni dell’elenco Mappa immagine.
  3. Selezionare Salva.

Seleziona il menu Mostra e seleziona Entrambi se desideri che una mappa immagine includa testo di rollover e un’azione.

Creare mappe immagine in Adobe Acrobat o Adobe InDesign

Potete creare le mappe immagine mentre create un eCatalog in Adobe Acrobat o Adobe InDesign.

In Acrobat o InDesign, inserite i riferimenti ipertestuali in corrispondenza delle mappe immagine desiderate e specificate i percorsi URL per le mappe immagine. Quando si seleziona l’opzione Estrai collegamenti durante il caricamento del file PDF in Adobe, Dynamic Media Classic converte automaticamente i collegamenti in mappe immagine.

Per ulteriori informazioni, consulta la Guida di Adobe InDesign o la Guida di Adobe Acrobat.

Per creare mappe immagine in Adobe InDesign

  1. In InDesign, passa a Windows® > Interattivo > Collegamenti ipertestuali.

  2. Nel pannello Collegamenti ipertestuali, selezionate il testo, la cornice o l’elemento grafico da convertire in una mappa immagine.

  3. Selezionare Nuovo collegamento ipertestuale dal menu del pannello.

  4. Nella finestra di dialogo Nuovo collegamento ipertestuale, dal menu Collega a, scegliere URL.

  5. Digita o incolla l’ID prodotto nella casella URL.

  6. Selezionare OK. Ad Adobe, Dynamic Media Classic completa l’URL utilizzando il modello URL della mappa immagine.

    NOTA

    Non è necessario impostare le opzioni di aspetto in Adobe InDesign. È possibile specificare l’aspetto in Adobe Dynamic Media Classic.

  7. Ripetete i passaggi da 2 a 6 per tutte le mappe immagine da creare.

  8. Esportate il file come PDF.

  9. Carica il PDF in Adobe Dynamic Media Classic.

  10. In Opzioni PDF, selezionare Estrai collegamenti.

Per creare mappe immagine in Adobe Acrobat

  1. In Acrobat, passa a Strumenti > Modifica avanzata > Strumento di collegamento.
  2. Trascinate per creare la mappa immagine.
  3. Nella casella Crea collegamento selezionare Collegamento personalizzato, quindi selezionare Avanti.
NOTA

Non è necessario impostare le opzioni di aspetto in Adobe Acrobat. È possibile specificare l’aspetto in Adobe Dynamic Media Classic.

  1. Nella casella Proprietà collegamento, seleziona Azioni.
  2. Selezionare Apri un collegamento web dal menu Seleziona azione, quindi selezionare Aggiungi.
  3. Digita l'ID prodotto per la mappa immagine nella casella Modifica URL e seleziona OK. Ad Adobe, Dynamic Media Classic completa l’URL utilizzando il modello URL della mappa immagine.
  4. Ripetete i passaggi da 1 a 7 per tutte le mappe immagine da creare.
  5. Salvate il file.
  6. Carica il PDF in Adobe Dynamic Media Classic e seleziona Estrai collegamenti dalle opzioni PDF.

In questa pagina