Le mappe di immagini sono un modo eccitante e interessante per animare il tuo sito Web: con loro, puoi caricare immagini e rendere parti di tali immagini selezionabili su altre risorse online. Se sei in difficoltà e non vuoi scaricare un editor di mappe di immagini, creare una mappa usando i tag HTML è semplice.
Avrai bisogno di un'immagine, un editor di immagini e una sorta di editor HTML o editor di testo. La maggior parte degli editor di immagini ti mostrerà le coordinate del tuo mouse quando punti l'immagine. Questi dati di coordinate sono tutto ciò che serve 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 dimensioni normali", ovvero, non dovresti usare un'immagine così grande che il browser la ridimensiona.
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
- poly-a poligono o figura a 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, quando si fa clic, apre 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 (oltre, su). Quindi, per l'angolo in alto a sinistra 0,0 e l'angolo in basso a destra 10,15 devi digitare 0,0,10,15. Quindi lo includi nella mappa:
Per un poligono , mappali ciascuno x, y coordinare separatamente. Il browser Web collega automaticamente l'ultimo set di coordinate con il primo; qualsiasi cosa all'interno di queste coordinate è 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 nei 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 del menu, quindi imposta una mappa.
Gli approcci moderni incoraggiano la progettazione reattiva e utilizzano fogli di stile a cascata per controllare il posizionamento di immagini e collegamenti ipertestuali su 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, i problemi relativi alla larghezza di banda o alle immagini interrotte moot il valore di una mappa immagine.
Quindi, sentiti libero di continuare a utilizzare questa tecnologia stabile e ben compresa, sapendo che al momento ci sono alternative più efficienti in voga con i web designer.
