Come creare mappe di immagini senza un editor di mappe di immagini

Questo articolo spiega come creare mappe immagine utilizzando i tag HTML invece di un editor di mappe immagine. La maggior parte degli editor di immagini ti mostrerà le coordinate del tuo mouse quando punti nell'immagine, che sono tutti i dati di cui hai bisogno 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 selezionata. Le mappe supportano tre diversi tipi di forme:

• rect: un rettangolo o una figura a quattro lati
• poly—un poligono o una figura con più lati
• cerchio—un 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, mappi 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 lo includi nella mappa:

Per un poligono, mappa ciascuno x, y coordinare separatamente. Il browser Web connette automaticamente l'ultimo set di coordinate con il primo; qualsiasi cosa all'interno di queste coordinate fa parte della mappa.

Cerchio le forme richiedono solo due coordinate, come il rettangolo, ma per la seconda coordinata si specifica 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 della mappa:

Considerazioni

Le mappe di immagini erano molto più comuni nell'era del Web 1.0 degli anni '90 fino ai primissimi 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 imposterebbe 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 della mappa sia ancora supportato nello standard HTML, l'uso di dispositivi mobili con fattori di forma ridotti può portare a problemi di prestazioni imprevisti con le mappe immagine. Inoltre, problemi di larghezza di banda o immagini interrotte mettono in discussione il valore di una mappa immagine.

Quindi, sentiti libero di continuare a utilizzare questa tecnologia stabile e ben compresa, sapendo che attualmente ci sono alternative più efficienti in voga con i web designer.