Come aggiungere più link in aree diverse di una immagine.

Come creare una mappa di link in una immagine per aprire diverse pagine web a seconda della zona dell'immagine in cui si clicca.

Non so se il titolo sia sufficientemente esplicativo e quindi forse è meglio iniziare il post con un esempio. Dopo le elezioni politiche alcuni siti online dei maggiori quotidiani di solito pubblicano una cartina dell'Italia divisa in regioni e l'utente, cliccando sulla regione che gli interessa, apre il link della pagina con i risultati della consultazione elettorale che riguardano proprio i collegi elettorali di quella area geografica.

In sostanza in una stessa immagine vengono inseriti collegamenti diversi a seconda della zona dell'immagine su cui si clicca. Un altro esempio potrebbe essere una mappa di una regione con i collegamenti ai punti vendita di una catena di negozi. Invece che dei punti vendita possono essere delle sedi di una organizzazione o semplicemente degli oggetti messi in vendita da chi fa commercio online.

Per linkare un'area delimitata di una immagine si usano tag HTML come <map> e <area> e la zona dell'immagine in cui inserire il collegamento viene determinata specificandone le coordinate. La creazione di un tale codice quando si ha a che fare con immagini a cui aggiungere molti link può diventare molto complessa.

Per agevolarci in questo compito si possono usare degli appositi tool online. C'è però un'altra difficoltà da risolvere, vale a dire il mantenimento dei link nella stessa posizione anche quando la pagina viene aperta da dispositivi mobili. Per esempio su Blogger vengono automaticamente ridimensionate tutte le immagini quando la pagina è aperta da dispositivo mobile. I collegamenti che sono stati inseriti prendendo come parametri le coordinate risultano quindi generalmente sballati. La soluzione è quella di creare due mappe distinte, una per il desktop e una per il mobile.

Nella immagine qui sotto ho inserito per brevità solo due link, uno nella Toscana e uno nella Lombardia, ma ne avrei potuti inserire quanti ne avessi voluti. I collegamenti di test sono per i miei account Facebook e Twitter.

La mappa l'ho realizzata con il tool Image Maps ma ci sono altri strumenti di questo tipo come HTML Map Creator e Online Image Map Editor. Con Image Maps si va su Browse for file per selezionare la immagine con cui creare la mappa di link per poi andare su Start Mapping. Nella finestra successiva si va su Click to continue in alto per aprire l'Editor della mappa

Si clicca con il destro del mouse sulla immagine per visualizzare il menù contestuale. Gli utenti Mac devono digitare Control + Click per aprire il menù. Per selezionare le varie aree si può scegliere di farlo con un Rettangolo con un Cerchio o con un Poligono. Per l'immagine che ho scelto come test è più indicato l'utilizzo di un poligono (Create Poly). Verrà aperta una finestra di configurazione del link

Nella scheda Options in Map URL si incolla l'indirizzo del collegamento. È consigliabile compilare anche i campi Title e Alt per descrivere il tipo di collegamento importante per questioni SEO. Nella scheda Events si può scegliere di aprire il link in un'altra scheda scegliendo _blank come valore del tag target. Opzionalmente si può aggiungere anche l'URL di una immagine che il navigatore vedrà quando passa con il mouse sopra al link.

Si clicca poi sulla immagine per delimitare l'area in cui è attivo il link. Si ripete la stessa operazione per tutti i collegamenti da aggiungere alla immagine per creare la mappa.

Nell'immagine dell'Italia suddivisa in Regioni ho creato con il poligono un collegamento sulla Toscana e uno sulla Lombardia che puntano rispettivamente verso il mio profilo Facebook e Twitter. Quando la mappa è terminata si clicca sopra all'immagine con il destro del mouse e si sceglie Get Code per copiare il codice HTML.

Il codice da selezionare e copiare si trova nella scheda HTML Code. Per ovviare al problema della visualizzazione da mobile occorrerà creare una seconda mappa con l'immagine ridimensionata. Tanto per fare un esempio io ho creato una mappa per il desktop con una immagine larga 600 pixel e una per il mobile con una immagine da 350 pixel.

Avremo quindi due codici con l'URL delle due immagini che però resteranno online solo per 24 ore nei server di Image Maps. Dovremo quindi sostituire gli URL di queste immagini con quelli di Google Foto.

Se siete utenti di Blogger potete andare su Nuovo Post quindi cliccare sul pulsante per aggiungere le immagini per poi caricare le due immagini delle mappe.

Si va poi su HTML e si copiano gli indirizzi delle due immagini che sono gli URL dopo src=". La Bozza che viene creata su Blogger potrà anche essere eliminata visto che le foto resteranno comunque online.

I due URL vanno sostituiti nel codice delle due mappe al posto degli indirizzi presenti sempre dopo src=". Questi due codici vanno incollati in una pagina web o in un post in Modalità HTML con questa sintassi

<style>
@media screen and (min-width: 630px) {
  #onlysmartphone {display:none;}
  }
@media screen and (max-width: 629px) {
  #desktoptablet{display:none;}
  }
</style>
<div align="center">
<div id="desktoptablet">
... Codice della Mappa per il desktop ...
</div>
<div id="onlysmartphone">
... Codice della Mappa per il mobile ...
</div>
</div>

dove al posto delle righe evidenziate di giallo si incollano i codici dell'immagine con le mappe dei link. ho scelto come breakpoint 630 pixel. Quando la pagina web viene aperta con un dispositivo che ha una risoluzione maggiore di 630 pixel si visualizzerà la mappa per il desktop e quando la risoluzione è inferiore si vedrà quella per il mobile. Per questa personalizzazione ho utilizzato i CSS Media Query per mostrare un contenuto in funzione della risoluzione del dispositivo con cui viene aperta la pagina web.