Le mappe immagine: quelle ridimensionabili
Come costruire mappe immagine ridimensionabili con strumenti online gratuiti
Questo articolo fa parte di una serie di due tutorial sulle mappe immagine. L'altro articolo è Le mappe immagine: quelle fisse. Entrambi gli articoli iniziano con una parte comune: la parte specifica di questo articolo inizia con il paragrafo Mappe immagine ridimensionabili.
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 ridimensionabili
Le mappe immagine ridimensionabili devono essere usate al posto delle mappe immagine fisse quando l’immagine viene scalata perché responsiva e si adatta perciò automaticamente alla larghezza della finestra del browser.
È necessario che anche le zone sensibili si adattino, altrimenti esse non corrispondono più alle aree dell’immagine che il navigatore è invitato a cliccare.
L’immagine
Una mappa immagine ridimensionabile 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:
<img src="/NomeImmagine.ext">
NomeImmagine.ext va sostituito con il nome effettivo dell’immagine (e del percorso, se necessario)
Ad esempio, se l’immagine si chiama Stella.jpg, nel codice HTML devi inserire
<img src="/Stella.jpg">
Forse ti sei accorto che non ho menzionato l’attributo usemap, che invece è presente nel caso di mappe immagine fisse…
Trattieni il fiato per qualche secondo: lo sconcertante motivo sarà svelato nel paragrafo La mappa.
In questo Quaderno uso un’immagine molto semplice che permette di dimostrare l’uso delle aree sensibili ridimensionabili. È l’immagine riportata nella figura sottostante.
Figura 1. L’immagine Stella.jpg: ogni cerchio è un’area sensibile che porta a una pagina differente.
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
È l’ora di una rivelazione imbarazzante: non c’è alcuna mappa. L’attributo usemap del tag <img> non viene usato proprio perché non viene definita alcuna mappa.
Di conseguenza, ciò di cui stiamo parlando non è (almeno dal punto strettamente tecnico) una mappa immagine.
Tuttavia, se si comporta come una mappa immagine e l’utente non la distingue da una mappa immagine, la si può ben chiamare (anche se impropriamente) mappa immagine. O no?
Io credo di sì.
Le coordinate delle aree sensibili
Ma se non sono definite da una mappa, come sono definite le aree sensibili?
Ebbene, non c’è nulla di esoterico, ma è comunque una trovata semplice e geniale.
In pratica non si tratta altro che di definire semplici collegamenti ipertestuali, definiti dai vecchi tag <a> e </a> e dotati degli attributi adatti.
Tra questi attributi, quello che fa la differenza è l’attributo CSS position, cui occore assegnare il valore absolute racchiudendo tutto entro l’attributo style. Vanno anche indicati i valori che determinano la posizione di ogni area sensibile.
La forma canonica del collegamento è
<a href="/Destinazione" title="Suggerimento style="position: absolute; left: DistanzaSinistro%; top: DistanzaSuperiore%; width: Larghezza%; height: Altezza%; z-index: Livello;">
L’elenco seguente riporta una sintentica spiegazione di ogni attributo.
- Destinazione: è la pagina web che viene richiamata al clic sull’area sensibile
- Suggerimento: è il testo che viene mostrato quando il puntatore viene portato sull’area sensibile
- DistanzaSinistro: è la distanza dell’area sensibile dal bordo sinistro dell’oggetto contenitore; è espresso in percentuale, con il punto come separatore decimale
- DistanzaSuperiore: è la distanza dell’area sensibile dal bordo superiore dell’oggetto contenitore; è espresso in percentuale, con il punto come separatore decimale
- Larghezza: è la larghezza dell’area sensibile; è espressa in percentuale, con il punto come separatore decimale
- Altezza: è l’altezza dell’area sensibile; è espressa in percentuale, con il punto come separatore decimale
- Livello: è l’indice di sovrapposizione delle aree sensibili rispetto all’immagine; il livello predefinito degli elementi sulla pagina web è 1, perciò alle aree sensibili è sufficiente assegnare il livello 2, in modo che siano poste sopra l’immagine; puoi indicare il livello che preferisci, secondo le tue necessità.
Puoi anche usare altri attributi previsti dall’HTML; ad esempio, puoi usare target per indicare se il collegamento deve essere aperto nella stessa finestra o in una nuova.
Non puoi però usare l’attributo alt, che non è previsto per l’elemento <a>. Questo potrebbe sembrare un vero peccato, soprattutto poiché si fa sempre più attenzione all’accessibilità dei siti web. Tuttavia, per loro natura, le mappe immagine ridimensionabili non sono accessibili, poiché non possono contenere indicazioni che non siano visive. Tienine conto durante la costruzione del tuo sito web: forse è doveroso predisporre un pulsante che visualizzi un sistema accessibile ai non vedenti.
Come detto nel paragrafo Mappe immagine ridimensionabili: vantaggi e svantaggi, le aree sensibili di una mappa immagine possono essere solo rettangolari. Ma perché, visto che il tag <a> può avere l’attributo shape, che definisce la forma del punto caldo?
In realtà, l’attributo shape non è supportato dall’HTML 5, perciò è bene evitarne l’uso. Nota che per le mappe immagini fisse non è stato usato l’elemento <a> ma l’elemento <area>, che contempla l’uso di shape in HTML 5.
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.
Responsive Image Map Generator
Lo strumento online che ti consiglio è Responsive Image Map Generator, che è raggiungibile all’indirizzo https://www.zaneray.com/responsive-image-map/ (figura sottostante).
Figura 2. Home page di Responsive Image Map Generator.
Innanzi tutto devi indicare l’immagine su cui creare la mappa. Poiché Responsive Image Map Generator opera solo su immagini online, devi procedere nel modo seguente:
- inserisci l’immagine nel tuo sito e pubblica la pagina
- con il browser, vai sulla pagina appena pubblicata, clicca con il pulsante destro sull’immagine e dal menu contestuale scegli il comando Visualizza immagine o quello equivalente (secondo il browser che usi); l’immagine viene visualizzata da sola nella pagina web
- copia l’indirizzo della pagina web così visualizzata e incollalo nella casella di Responsive Image Map Generator.
Responsive Image Map Generator mostra ora l’immagine che hai caricata. Nella zona superiore sinistra è posto lo strumento per determinare le aree sensibili (figura sottostante); esso riporta la posizione e le dimensioni di sé stesso e dispone delle caselle in cui inserire il link e il titolo da associare all’area sensibile.
Figura 3. Responsive Image Map Generator è pronto per definire le aree sensibili dell’immagine.
Ti consiglio di usare la procedura descritta nei punti seguenti.
- Nelle caselle Link e Title inserisci rispettivamente l’URL del documento da aprire al clic e il testo del suggerimento
- Trascina il rettangolo dell’area sensibile sopra la parte dell’immagine che vuoi dotare di link
- Ridimensiona il rettangolo dell’area sensibile in modo che circondi esattamente l’area dell’immagine che vuoi dotare di link (Figura 11).
Non preoccuparti se l’area sensibile non è perfetta o se il codice ha bisogno di aggiustamenti: l’area puoi sempre modificarla, anche quando ne hai tracciate altre, e il codice HTML puoi rielaborarlo direttamente nel sito.
Puoi modificare i valori, aggiungere o togliere attributi e fare tutti i perfezionamenti che ti vengono in mente.
Figura 4. È stata definita la prima area sensibile.
Per definire un’altra area sensibile, clicca sul pulsante Add link e ripeti le operazioni.
Configura tutte le aree sensibili necessarie, come nell’esempio della figura sottostante.
Figura 5. Tutte le aree sensibili sono state definite.
Nella parte inferiore della pagina, Responsive Image Map Generator riporta il codice HTML relativo alle aree sensibili. Copialo e incollalo subito dopo il codice HTML dell’immagine.
Creare un elemento contenitore
Potresti pensare che quanto fatto sia abbastanza per ottenere una mappa immagine perfettamente scalabile, ma non è così.
Il fatto è che la posizione e le dimensioni delle aree sensibili si basano sulle posizioni e sulle misure dell’immagine nel Responsive Image Map Generator. La tua immagine può essere visualizzata nel tuo sito con posizioni e dimensioni differenti, che dipendono sia dall’organizzazione della pagina web sia della finestra del browser. Puoi facilmente sperimentare da te questo inghippo.
Tuttavia, la soluzione è semplice: è sufficiente inserire l’immagine e i link in un oggetto contenitore appropriato.
In pratica devi aprire prima del codice HTML dell’immagine un DIV, definendone la posizione come relativa:
<div style="position: relative;">
dopo il codice HTML delle aree sensibili devi chiudere il contenitore:
</div>
Il codice della mappa immagine ridimensionabile dell’esempio diventa perciò:
<div style="position: relative;">
<img src="/Stella.jpg">
<a href="/pagina1.html" title="Vai a pagina 1" style="position: absolute; left: 46.5%; top: 11.11%; width: 6.25%; height: 11.59%; z-index: 2;"></a>
<a href="/pagina2.html" title="Vai a pagina 2" style="position: absolute; left: 61.25%; top: 24.76%; width: 6%; height: 11.75%; z-index: 2;"></a>
<a href="/pagina3.html" title="Vai a pagina 3" style="position: absolute; left: 64.83%; top: 54.76%; width: 6.17%; height: 11.59%; z-index: 2;"></a>
<a href="/pagina4.html" title="Vai a pagina 4" style="position: absolute; left: 54.67%; top: 78.89%; width: 6.17%; height: 10.95%; z-index: 2;"></a>
<a href="/pagina5.html" title="Vai a pagina 5" style="position: absolute; left: 38.5%; top: 78.57%; width: 6.17%; height: 11.59%; z-index: 2;"></a>
<a href="/pagina6.html" title="Vai a pagina 6" style="position: absolute; left: 28.42%; top: 54.92%; width: 6%; height: 11.27%; z-index: 2;"></a>
<a href="/pagina7.html" title="Vai a pagina 7" style="position: absolute; left: 31.92%; top: 24.76%; width: 6.42%; height: 11.75%; z-index: 2;"></a>
</div>
È tutto.
In breve
- Crea l’immagine con le dimensioni esatte con cui sarà pubblicata.
- Pubblica l’immagine sul tuo sito
- Vai all’indirizzo https://www.zaneray.com/responsive-image-map/ e usa Responsive Image Map Generator per generare il codice HTML delle aree sensibili
- Copia il codice HTML prodotto da Image Map Generator e incollalo nel tuo sito, sotto il codice HTML dell’immagine
- Aggiusta il codice HTML delle aree sensibili, perfezionando tutti gli attributi che ti occorrono
- Inserisci l’immagine e le aree sensibili all’interno di una sezione con posizione relativa
- Salva la pagina web.
Scarica il PDF
Questo articolo e Le mappe immagine: quelle fisse 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.
Sostieni i miei studi: fai una donazione
A quasi sessant'anni, ho deciso di iscrivermi all'università. Facendo il calcolo di quanto mi costa (tra tasse accademiche, esami, libri di testo, spostamenti, tempo tolto alla professione eccetera), iscrivermi è una pazzia. Ma una voce interiore mi dice di farlo.
Perciò faccio fiducia a questa voce interiore (sperando che non si tratti del primo segno di un crollo psicotico) e cerco di dare il meglio di me. Tu però puoi aiutarmi: puoi infatti sostenere i miei studi facendo una donazione, per la quale scegli tu l'importo: dai 5 euro in su è tutto ben accetto. Ciò mi permetterà di finanziare almeno in parte i miei studi e di continuare a dedicare del tempo al mio blog con argomenti che spero utili.
PayPal ti premette di fare una donazione anche se non hai un conto PayPal: puoi infatti usare la tua carta di credito o di debito, senza alcuna commissione aggiuntiva (se non quelle della tua banca).
Puoi fare la donazione cliccando sul link o inquadrando il QR Code: scegli tu la procedura che ti è più semplice.
Se non sei pratico, leggi le istruzioni su come fare la donazione
Segui il link
Inquadra il codice QR
Se vuoi saperne di più su sulla mia laurea, leggi il mio articolo Ho deciso di prendere la laurea (e tu puoi aiutarmi).
Il sistema dei commenti è di CComment