Generatore di Image Map: disegna aree cliccabili, ottieni HTML | We.Inc
Disegna rettangoli, cerchi e poligoni sulla tua immagine, assegna a ciascuno un link e un testo alt, poi copia l'HTML classico con map e area o una versione SVG responsive.
Generatore di Image Map
Una image map trasforma parti di un'unica immagine in link separati. Carica un'immagine, trascina per disegnare rettangoli o cerchi, clicca i punti per i poligoni e scrivi un link e un testo alt per ogni area. Copia l'HTML classico con map e area, o una versione SVG responsive le cui aree si rimpiccioliscono con l'immagine sui telefoni.
Forme di area e relative coords
Significato
Angolo in alto a sinistra e angolo in basso a destra
Centro e raggio
Ogni angolo in ordine; la forma si chiude da sola
(nessuna)
Tutto ciò che non è coperto da un'altra area
Planimetrie, schemi di prodotto, foto di gruppo e mappe spesso richiedono più link dentro un'unica immagine. Disegnare le aree a occhio è molto più rapido che misurare i pixel, e la tua immagine non lascia mai il tuo computer: viene letta nel browser e nel codice si usano solo le sue dimensioni.
Usa la planimetria di esempio o scegli un tuo file immagine. Le coordinate sono misurate nei pixel reali dell'immagine, anche quando l'anteprima è ridotta.
Scegli Rettangolo o Cerchio e trascina sull'immagine, oppure scegli Poligono, clicca ogni angolo e poi premi Chiudi poligono.
Modifica link, testo alt e coordinate di ogni area nell'elenco. Le coordinate digitate aggiornano il disegno, il che permette anche a chi usa la tastiera di creare una mappa.
Copia l'HTML classico o l'SVG responsive. Nel codice, sostituisci il percorso dell'immagine con la posizione in cui il file si troverà sul tuo sito.
Ogni area con un href ha bisogno di un testo alt. È ciò che leggono gli screen reader, quindi scrivi la destinazione, per esempio Prenota un tavolo al bar.
Le coordinate delle image map classiche sono pixel CSS fissi. Se il CSS rimpicciolisce l'immagine sui telefoni, le aree restano dov'erano, quindi usa l'output SVG per i layout fluidi.
Mantieni le zone cliccabili abbastanza grandi da toccarle comodamente, ed evita aree che si toccano senza spazio tra loro.
Non nascondere dentro un'immagine l'unico percorso verso una pagina. Ripeti i link importanti come normale testo nelle vicinanze.
Domande frequenti
Come collego la mappa all'immagine?
Dai un nome alla mappa, poi imposta usemap sull'img con lo stesso nome preceduto da #, per esempio usemap="#site-map" e map name="site-map". Il generatore li scrive entrambi per te.
Le image map HTML sono responsive?
Non da sole. Le coordinate sono numeri in pixel CSS, quindi non seguono un'immagine ridimensionata dal CSS. L'output SVG risolve il problema con un viewBox, che ridimensiona insieme l'immagine e le forme dei link.
La mia immagine viene caricata online?
No. Il file viene aperto con un object URL locale così il browser può mostrarlo e leggerne larghezza e altezza. Niente viene inviato a We.Inc o a chiunque altro.
Le aree possono sovrapporsi?
Sì. Dove due aree si sovrappongono, il clic va a quella elencata per prima nella mappa, quindi metti le aree più piccole prima di quelle più grandi che le circondano.
Map classica o link SVG
La coppia map e area funziona nei browser da decenni e mantiene l'immagine come un normale img, il che è semplice per gli strumenti di gestione dei contenuti. Il suo punto debole sono le coordinate fisse.
La versione SVG disegna l'immagine dentro un elemento svg e avvolge ogni forma in un link. Poiché tutto condivide un unico viewBox, le aree si ridimensionano perfettamente, e puoi aggiungere un contorno all'hover con del CSS sulle forme.
Immagini cliccabili accessibili
Dai all'immagine stessa un testo alt che descriva l'intera immagine, e a ogni area un testo alt che ne indichi la destinazione. Chi usa la tastiera può scorrere le aree con Tab nell'ordine del sorgente, quindi elencale in un ordine di lettura sensato.
Fai una prova scorrendo il risultato con Tab. Se l'ordine del focus salta qua e là nell'immagine, riordina le righe dell'elenco prima di copiare.
Codice per la planimetria di esempio
Questi sono i due output che il generatore scrive per le quattro aree di esempio.
Map e area classiche
Funziona ovunque alla dimensione naturale dell'immagine di 600 per 360 pixel.
Link SVG responsive
Il viewBox corrisponde alle dimensioni dell'immagine, quindi ogni forma di link si ridimensiona con l'immagine.
Area {n}
Disegna le tue aree
Disegna rettangoli, cerchi e poligoni sulla planimetria di esempio o sulla tua immagine, poi imposta un link e un testo alt per ogni area.