Mappa dell’immagine HTML: immagini cliccabili con il tag map

Una mappa dell’immagine HTML indica immagini o video dei siti web con varie aree cliccabili che portano a URL interni o esterni. Le aree sensibili ai link di una mappa dell’immagine vengono create con determinate coordinate e collegate con i relativi URL o indirizzi web.

Cos’è una mappa dell’immagine HTML?

Le mappe dell’immagine HTML sono immagini cliccabili che aumentano la facilità d’uso e l’interattività. Più precisamente, con le mappe dell’immagine HTML è possibile inserire diverse aree sensibili collegate con link in un documento HTML. I rimandi integrati possono essere pagine secondarie, hyperlink a URL interni o esterni o download. Facendo clic sull’elemento collegato, gli utenti possono aprire i contenuti desiderati o avviare determinate azioni.

Per creare mappe dell’immagine si usa il tag HTML <map>. Per integrare la mappa dell’immagine preparata si usa a sua volta il tag img HTML.

Chi non vuole creare autonomamente una mappa dell’immagine HTML può ricorrere agli appositi generatori di mappe delle immagini. Con questi strumenti online basta caricare l’immagine desiderata e definire le destinazioni desiderate dei link nelle aree dell’immagine.

Per cosa si può usare una mappa dell’immagine HTML?

Una mappa dell’immagine può essere integrata in qualsiasi documento HTML non appena sono state definite le relative aree sensibili. Il punto di forza delle mappe risiede nella possibilità di collegare più link di destinazione all’interno di un’immagine o di un video. Tra le svariate possibilità d’uso e i vari campi di applicazione delle mappe dell’immagine HTML troviamo ad esempio:

• Cartine con rimandi cliccabili per regioni, città, filiali di aziende o stazioni di servizio
• Immagini di ricette con informazioni aggiuntive sugli ingredienti presenti nella figura
• Banner pubblicitari con vari prodotti, categorie o servizi collegati con link
• Informazioni aggiuntive o pubblicità da visualizzare nei video
• Un sito web sotto forma di mappa dell’immagine con vari elementi di navigazione
• Visualizzazione di diverse modalità di gioco, funzioni o livelli nei giochi online.

Come si crea una mappa dell’immagine HTML?

Per creare una mappa dell’immagine si usa l’elemento HTML <map>. Si deve inoltre usare l’attributo name per consentire il riferimento alla mappa. In poche parole, in un’immagine o in un video è possibile ancorare o collegare la destinazione desiderata mediante il nome della mappa. Seguono ulteriori istruzioni sulle coordinate dei rimandi collegati.

Puoi collocare una mappa dell’immagine HTML in qualsiasi punto di un documento HTML. Definisci le aree e le coordinate (coords) per indicare la posizione, le dimensioni e la forma dell’area sensibile. Le aree possono essere inserite in un’immagine sotto forma di rettangoli, poligoni o cerchi. Le coordinate usate dipendono dalla forma dell’area di rimando.

Con l’attributo HTML <area> è poi possibile definire singole aree della mappa dell’immagine. Per usare una mappa dell’immagine serve almeno un attributo area. Per definire le caratteristiche della mappa e dei relativi rimandi è possibile usare gli attributi HTML seguenti:

• shape: gli attributi shape consentono di definire le forme delle aree sensibili in un’immagine. Sono disponibili rect per i rettangoli, circle per i cerchi o poly per i poligoni. La sintassi di “rect” è rect = x1,y1,x2,y2. Mentre x1 e y1 rappresentano le coordinate dell’angolo superiore sinistro, x2 e y2 definiscono l’angolo inferiore destro. La sintassi di circle è circle = xc,yc,radius. La sintassi per i poligoni è poly = x1,y1,x2,y2,x3,y3 ….
• coords: l’attributo coords definisce le coordinate che delimitano un’area sensibile. Le aree dell’immagine vengono contrassegnate con pixel, ad esempio con un editor di immagini.
• href: l’attributo href consente di rimandare agli URL e agli indirizzi interni o esterni collegati.
• alt: l’attributo alt permette di integrare il testo alternativo in caso di problemi con il caricamento della mappa dell’immagine. È utile ad esempio per i browser di testo puri o per garantire l’accessibilità.
• title: l’attributo title integra un testo breve con informazioni importanti che vengono visualizzate quando gli utenti passano sopra un’area dell’immagine.
• img: con il tag img è possibile integrare e rappresentare un file di immagine in un documento HTML.

Come si può integrare una mappa dell’immagine in una pagina HTML?

Una volta creata una mappa dell’immagine, è possibile inserirla nella posizione desiderata di un sito web con il tag HTML <img>. Per fare riferimento alla mappa desiderata e renderla disponibile puoi utilizzare anche il già menzionato elemento <map>. L’esempio che segue mostra l’integrazione:

<img src="immaginespiaggia.jpg" usemap="#image-map">
<map name="image-map">
    <area target="_blank" alt="Spiaggia" title="Spiaggia" href="https://example.com/spiaggia" coords="1,928,3260,1834" shape="rect">
    <area target="_blank" alt="Mare" title="Mare" href="https://example.com/mare" coords="3263,556,7,919" shape="rect">
    <area target="_blank" alt="Cielo" title="Cielo" href="https://example.com/cielo" coords="3263,510,10,0" shape="rect">
</map>

Per l’immagine di esempio della spiaggia sono state definite tre aree sensibili: spiaggia, mare e cielo. Cliccando in queste aree si viene rimandati automaticamente alle relative pagine di destinazione, che si aprono in una nuova finestra.

Close