# 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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml/). 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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-html/) ``. Per integrare la mappa dell’immagine preparata si usa a sua volta il [tag img HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/html-img/). 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. Consiglio Vorresti saperne di più sulle **funzioni e le possibilità di utilizzo di HTML**? Il nostro [tutorial su HTML per principianti](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/imparare-lhtml-lampio-tutorial-per-principianti/) ti consente di iniziare a usare il linguaggio di markup in modo semplice e veloce. ## 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 ``. 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 `` è 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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/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](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-html/) ``. Per fare riferimento alla mappa desiderata e renderla disponibile puoi utilizzare anche il già menzionato elemento ``. L’esempio che segue mostra l’integrazione: ```html Spiaggia Mare Cielo ``` 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. [![Immagine: Mappa dell’immagine: immagine di esempio con marcature](https://www.ionos.it/digitalguide/fileadmin/_processed_/9/1/csm_beach-image_38f2aa397d.webp "Mappa dell’immagine: immagine di esempio con marcature")](https://www.ionos.it/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/beach-image.jpg) Nell’esempio le tre aree sensibili della mappa dell’immagine HTML sono state definite con attributi shape (di tipo “rect”). This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/mappa-dellimmagine-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/mappa-dellimmagine-html/) for AI/LLM consumption.