Cosa sapere
• Utilizzare un'immagine di dimensioni normali che il browser non ridimensionerà. Avrai anche bisogno di un editor di immagini e di un editor HTML o di testo.
• Quando inserisci l'immagine, aggiungi un attributo extra per identificare le coordinate della mappa.
• Ad esempio:
Questo articolo spiega come creare mappe di immagini utilizzando tag HTML invece di un editor di mappe di immagini. La maggior parte degli editor di immagini ti mostrerà le coordinate del tuo mouse quando punti nell'immagine, che sono tutti i dati necessari per iniziare con le mappe di immagini.
Creazione di una mappa immagine
Per creare una mappa immagine, seleziona prima un'immagine che servirà come base della mappa. L'immagine dovrebbe essere di "dimensione normale", ovvero non dovresti usare un'immagine così grande da essere ridimensionata dal browser.
Quando inserisci l'immagine, aggiungi un attributo extra che identifica le coordinate della mappa:
Quando crei una mappa immagine, stai creando un'area cliccabile sull'immagine, quindi le coordinate della mappa devono essere allineate con l' altezza e la larghezza dell'immagine che hai selezionato. Le mappe supportano tre diversi tipi di forme:
- rect-un rettangolo o una figura a quattro lati
- poli-a poligono o figura a più lati
- cerchio-a cerchio
Per creare le aree, devi isolare le coordinate specifiche che intendi mappare. Una mappa può essere costituita da una o più aree definite sull'immagine che, se cliccate, aprono un nuovo collegamento ipertestuale.
Per un rettangolo, mappa solo gli angoli in alto a sinistra e in basso a destra. Tutte le coordinate sono elencate come x, y (sopra, sopra). Quindi, per l'angolo in alto a sinistra 0, 0 e l'angolo in basso a destra 10, 15 dovresti digitare 0, 0, 10, 15. Quindi includilo nella mappa:
Per un poligono, mappa ogni coordinata x, y separatamente. Il browser Web collega automaticamente l'ultimo set di coordinate con il primo; qualsiasi cosa all'interno di queste coordinate fa parte della mappa.
Le forme del cerchio richiedono solo due coordinate, come il rettangolo, ma per la seconda coordinata, specifichi il raggio o la distanza dal centro del cerchio. Quindi, per un cerchio con il centro a 122, 122 e un raggio di 5 dovresti scrivere 122, 122, 5:
Tutte le aree e le forme possono essere incluse nello stesso tag mappa:
Considerazioni
Le mappe di immagini erano molto più comuni nell'era del Web 1.0 dagli anni '90 fino all'inizio degli anni 2000: le mappe di immagini spesso costituivano la base della navigazione di un sito web. Un designer creerebbe una sorta di immagine per indicare le voci di menu, quindi impostare una mappa.
Gli approcci moderni incoraggiano il design reattivo e utilizzano fogli di stile a cascata per controllare il posizionamento di immagini e collegamenti ipertestuali in una pagina.
Sebbene il tag map sia ancora supportato nello standard HTML, l'uso di dispositivi mobili con fattori di forma piccoli può portare a problemi di prestazioni imprevisti con le mappe di immagini. Inoltre, problemi di larghezza di banda o immagini interrotte sminuiscono il valore di una mappa immagine.
Quindi, sentiti libero di continuare a usare questa tecnologia stabile e ben nota, sapendo che ci sono alternative più efficienti attualmente in voga con i web designer.
