Le mappe immagine: quelle fisse

Come realizzare mappe immagini fisse con strumenti online gratuiti

In accordo con Wikipedia, una mappa immagine (dall'inglese image map) è una immagine digitale in cui alcune aree sono link ad altri contenuti mediali.

Le mappe immagine sono usate come pratico sistema di navigazione in un sito web: secondo il punto dell’immagine su cui il navigatore clicca, vengono richiamate pagine web differenti.

Una mappa immagine è composta da due elementi distinti:

• l’immagine, che è una normale immagine adatta al web
• la mappa, che definisce ogni area sensibile.

Le aree sensibili della mappa immagine, quelle cioè dotate di link che viene attivato al clic, sono chiamate anche hot spot (punti caldi).

Mappe immagine fisse e ridimensionabili

Le mappe immagini si dividono in due categorie:

• mappe immagini fisse, che al variare delle dimensioni della finestra del browser mantengono le dimensioni proprie
• mappe immagini ridimensionabili, che vengono scalate in accordo con le dimensioni della finestra del browser.

Ognuno dei tipi di mappe immagini ha vantaggi e svantaggi.

Mappe immagine fisse: vantaggi e svantaggi

Il vantaggio delle mappe immagine fisse sta nella possibilità di definire con precisione la forma delle aree sensibili. Ciò consente una precisione al pixel delle aree sensibili anche quando la forma non è rettangolare o ellittica.

Di contro, vi è il grande svantaggio che una mappa immagine fissa non può essere ridimensionata, poiché le aree sensibili perderebbero la corrispondenza con le zone dell’immagine. Questo problema è oggi grave, perché i siti sono ormai tutti responsivi o adattabili (anche per la diffusione dei dispositivi mobili) ed è perciò diventato normale che le immagini si adattino alla dimensione della finestra del browser.

Mappe immagine ridimensionabili: vantaggi e svantaggi

L’enorme vantaggio delle mappe immagine ridimensionabili sta nel fatto che le aree sensibili mantengono automaticamente la corrispondenza con le zone dell’immagine anche quando quest’ultima viene scalata.

Lo svantaggio è dato dall’obbligo di definire aree sensibili solo di forma rettangolare.

Strumenti per le mappe immagine

Questo tutorial e quello collegato spiegano come costruire le mappe immagine: uno quelle fisse e l'altro quelle ridimensionabili.

Per farlo sono necessari gli strumenti seguenti (o altri equivalenti):

• Inkscape o GIMP per costruire le immagini cui applicare le mappe
• un collegamento a Internet per usare gli strumenti online per la definizione delle zone sensibili delle mappe immagine.

Consentimi una piccola nota. Per definire le aree sensibili di una mappa immagine fissa io ero solito usare GIMP, che è dotato di una funzione apposita. Mi piace GIMP e mi piace il software libero. Tuttavia sono ormai diffusi siti web che permettono di generare le mappe con le zone sensibili in modo molto semplice. Perciò, perché non usare questi strumenti?

Le mappe immagine fisse

Un esempio tipico di mappa immagine è lo schema delle regioni italiane, mostrato nella figura sottostante: secondo la regione su cui si clicca, viene aperta la pagina relativa alla regione cliccata.

Figura 1. Esempio di mappa immagine: clicca per andare all'immagine originale

L’immagine originale è visibile alla pagina https://it.wikipedia.org/wiki/Regione_(Italia) di Wikipedia: se vuoi verificarne il funzionamento è sufficiente seguire il link e cliccare sulle varie regioni del nostro Paese.

L’immagine

Una mappa immagine fissa si basa su una qualunque immagine che può essere inserita in una pagina web. Di solito si usano immagini in formato JPEG o, se si fa uso di trasparenze, in formato PNG.

L’immagine va inserita nel codice HTML con la sintassi consueta, inserendo anche l’indicazione del nome della mappa che contiene le aree sensibili:

<img src="/NomeImmagine.ext" usemap="#NomeMappa">

NomeImmagine.ext va sostituito con il nome effettivo dell’immagine (e del percorso, se necessario)

NomeMappa va sostituito con il nome effettivo della mappa; puoi assegnare il nome che preferisci.

Fai attenzione a non dimenticare di far precedere il simbolo # al nome della mappa.

Ad esempio, se l’immagine si chiama Geometria.jpg e la mappa si chiama MappaGeometria, nel codice HTML devi inserire

<img src="/Geometria.jpg" usemap="#MappaGeometria">

In questo tutorial uso un’immagine molto semplice che permette di dimostrare l’uso dei tipi di aree sensibili. È l’immagine riportata nella figura sottostante.

Figura 2. L’immagine Geometria.jpg, usata come esempio per la mappa immagine fissa.

Ricorda che il tag <img> consente anche per le mappe immagine l’uso dei normali attributi, quali width, height, alt, title e via dicendo.

La mappa

La mappa è, in buona sostanza, una porzione di codice HTML racchiusa tra i tag <map> e </map>.

Tra questi due tag trovano posto:

• il nome della mappa, espresso mediate l’attributo name del tag <map>
• l’elenco delle aree sensibili, espresse mediante il tag <area>
• il tipo di ogni area sensibile, espresso mediante l’attributo shape del tag <area>
• le coordinate di ogni area sensibile, espresse mediante l’attributo coords del tag <area>

Le aree sensibili di un’immagine fissa possono essere di tre tipi, secondo la loro forma:

• rettangolari, che racchiudono cioè un’area rettangolare (o quadrata). Per esse si deve specificare il valore rect dell’attributo shape: shape="rect"
• circolari, che racchiudono cioè un’area circolare (ma non ellittica). Per esse si deve specificare il valore circle dell’attributo shape: shape="circle"
• poligonali, che racchiudono cioè un’area chiusa di qualunque forma, purché tracciata mediante segmenti diritti. Per esse si deve specificare il valore poly dell’attributo shape: shape="poly".

Le aree sensibili sono definite mediante apposite coordinate, che puoi determinare manualmente o mediante strumenti appositi.

Le coordinate delle aree sensibili

Le coordinate delle aree sensibili sono definite in modi differenti secondo il tipo di area.

Per le aree rettangolari vanno indicati quattro valori: x,y,x,y. I primi due si riferiscono alle coordinate del vertice superiore sinistro del rettangolo, mentre gli ultimi due si riferiscono ai valori del vertice inferiore destro. Per esempio: coords="54,37,253,161".

Per le aree circolari vanno indicati i valori x,y.z. I primi due si riferiscono alle coordinate del centro, mentre il terzo si riferisce alla lunghezza del raggio. Per esempio: coords="447,112,79".

Per le aree poligonali vanno indicati i valori x,x corrispondenti alle coordinate di tutti i vertici dei segmenti. Ad esempio: coords="131,222,73,286,165,359,313,323,429,319,519,367,513,284,425,236,254,259".

Gli altri attributi del tag <area>

Oltre gli attributi coods e shape puoi indicare, per ogni area sensibile, altri attributi del tag <area>.

• href, che permette di indicare la pagina di destinazione del link; senza questo attributo, la mappa immagine non avrebbe senso
• target, che permette di definire il luogo di apertura del link
• alt, che definisce il testo alternativo per l’area sensibile
• title, che definisce il testo del suggerimento che appare al passaggio del puntatore sull’area sensibile.

Se vuoi maggiori informazioni sul tag <area>, ti consiglio di consultare la relativa pagina di w3school.com all’URL https://www.w3schools.com/tags/tag_area.asp.

Il codice HTML della mappa per l’immagine vista nella Figura 2 potrebbe essere il seguente.

<map name="MappaGeometria">

<area target="_blank" alt="Rettangolo che porta alla pagina del rettangolo" title="Vai alla pagina del rettangolo" href="/rettangolo.html" coords="54,37,253,161" shape="rect">

<area target="_blank" alt="Cerchio che porta alla pagina del cerchio" title="Vai alla pagina del cerchio" href="/cerchio.html" coords="447,112,79" shape="circle">

<area target="_self" alt="Poligono che porta alla pagina del poligono" title="Vai alla pagina del poligono" href="/poligono.html" coords="131,222,73,286,165,359,313,323,429,319,519,367,513,284,425,236,254,259" shape="poly">

</map>

Il codice può essere inserito subito sotto quello dell’immagine.

Nella figura sottostante è mostrato il risultato con l’immagine e la mappa di esempio.

Figura 3. Ogni figura geometrica è dotata di un proprio link.

Come definire le coordinate delle aree sensibili

Per conoscere le aree sensibili di una mappa, puoi usare un software di disegno provvisto di righelli o di uno strumento che restituisca le coordinate di un determinato punto. Con uno di questi software puoi effettuare le misurazioni e i calcoli che ti servono.

Tuttavia oggi sono disponibili online strumenti che rendono tutto il procedimento estremamente semplice: tu devi solo tracciare le aree e loro faranno i calcoli e le misurazioni. Anzi, alcuni ti permettono di indicare altri attributi, confezionando per te il codice HTML da inserire nel tuo sito.

Image Map Generator

Lo strumento online che ti consiglio è Image Map Generator, che è raggiungibile all’indirizzo https://www.image-map.net/ (vedi la figura sottostante).

Figura 4. La home page di Image Map Generator è raggiungibile all’indirizzo https://www.image-map.net/

Innanzi tutto devi indicare l’immagine su cui creare la mappa.

Se vuoi usare un’immagine memorizzata sul tuo computer, clicca il pulsante Select Image from My PC e sfoglia quindi le cartelle del disco fino a scegliere l’immagine desiderata.

Se vuoi invece usare un’immagine che risiede su una pagina web, clicca il pulsante Load Image from Website e indica il percorso completo dell’immagine da usare.

Image Map Generator mostra ora l’immagine che hai caricata e, nella parte inferiore, riporta lo strumento per determinare le aree sensibili (figura sottostante).

Figura 5. Image Map Generator è pronto per definire le aree sensibili dell’immagine.

Per ogni area sensibile devi indicare il tipo (Shape), l’url di destinazione (Link), il testo del suggerimento (Title) e la modalità di apertura del collegamento (Target).

Ricorda che lavori sull’area contrassegnata dalla selezione Active. e che prima di tracciare l’area devi scegliere il tipo dall’elenco della casella Shape.

Per tracciare l’area sensibile opera nei modi seguenti:

• per le aree rettangolari, clicca sul vertice superiore sinistro e poi sul vertice superiore destro
• per le aree circolari, clicca sul centro e poi su un punto qualunque del bordo
• per le aree poligonali, clicca sui vertici di ogni segmento.

Le aree vengono tracciate automaticamente. Dopo la loro creazione, tu puoi comunque modificarle, sia spostando i punti sia spostando tutta l’area.

Inserisci i valori opportuni nelle caselle Link, Title e Target.

Dopo aver completato la prima area sensibile, clicca sul pulsante Add New Area e ripeti le operazioni, ricordando di selezionare la nuova area sensibile mediante il pulsante Active. Crea tutte le aree sensibili che ti servono (figura sottostante).

Figura 6. Le tre aree sensibili sono state definite. 

Clicca ora sul pulsante Show Me The Code!: viene aperta una finestra popup che riporta il codice HTML, sia dell’immagine sia della mappa (figura sottostante).

Figura 7. Il codice HTML prodotto da Image Map Generator.

Copialo e inseriscilo nel tuo sito, modificandolo nei punti opportuni. Per esempio, puoi cambiare il nome della mappa immagine e i testi alternativi; o puoi fare tutte le modifiche che credi, purché rispetti la sintassi corretta per le mappe immagine.

In breve

1. Crea l’immagine con le dimensioni esatte con cui sarà pubblicata.
2. Pubblica l’immagine sul tuo sito, associando ad essa l’attributo usemap, con il nome della mappa immagine che userai
3. Vai all’indirizzo https://www.image-map.net/ e usa Image Map Generator per generare il codice HTML delle aree sensibili
4. Copia il codice HTML prodotto da Image Map Generator e incollalo nel tuo sito, sotto il codice HTML dell’immagine
5. Aggiusta il codice HTML della mappa, correggendone il nome e perfezionando tutti gli attributi che ti occorrono
6. Salva la pagina web.

Scarica il PDF

Questo articolo e Le mappe immagine: quelle ridimensionabili sono stati raccolti in un unico PDF che puoi scaricare gratuitamente.

Se desideri studiare l'argomento, ti consiglio di scaricare il PDF, stamparlo e di seguire la trattazione su carta, mentre verifichi le procedure online.

In questo modo potrai godere di tutti i vantaggi sia del mondo tradizionale sia di quello digitale.

Scarica il PDF
Fornire immagini differenti
secondo la larghezza dello schermo