Blogger Book

Mappare un'immagine significa fondamentalmente aggiungere più link a diverse parti di una singola immagine. Questo si ottiene utilizzando il tag <MAP> e il tag <AREA> , che definiscono le aree dell'immagine in cui vengono aggiunti i link. Queste aree contengono le coordinate della parte selezionata dell'immagine, coordinate che, alla maggior parte dei mortali, sembrano scritte in cinese. L'obiettivo è stabilire la distanza in pixel tra una particolare area dell'immagine e aggiungere il link a tali coordinate, che sarà accessibile solo in quell'area.
Ad esempio, nell'immagine seguente ci sono otto link e ognuno può essere cliccato solo nella rispettiva area.

Stabilire le coordinate di ogni area può essere stressante, faticoso, estenuante e folle; fortunatamente, esistono servizi online che permettono di fare tutto questo senza dover contare pixel, misurare o altro.
Ce ne sono diversi, ma oggi parleremo di Image-Maps . Questo strumento online ci permette di mappare le nostre immagini facilmente e con tutte le opzioni necessarie.

Per prima cosa, caricheremo la nostra immagine su un servizio di hosting e incolleremo l'URL dell'immagine nell'area corrispondente. Questo ci darà anche la possibilità di cercare l'immagine sul nostro computer, ma è sempre meglio caricarla noi stessi per garantire che l'immagine sia sempre disponibile, poiché le immagini caricate da lì verranno eliminate dopo 24 ore.

Dopo aver cliccato su Continua , inizieremo a mappare l'immagine. Per farlo, clicca con il tasto destro del mouse e si aprirà un menu.

"Crea Rettangolo" serve per creare un rettangolo, "Crea Poligono" per creare un poligono e "Crea Cerchio" per creare un cerchio. Scegli quello che ti serve e disegna la forma per selezionare l'area dell'immagine a cui vuoi collegarti. Apparirà immediatamente una finestra in cui potrai aggiungere l'URL per quell'area, insieme a un titolo, un alt e un ID, se lo desideri. Nella scheda " Eventi"
, puoi impostare se il collegamento si apre in una nuova scheda o meno.

Una volta terminate le impostazioni delle aree dell'immagine, fai clic con il pulsante destro del mouse e seleziona Ottieni codice dal menu .

Nella scheda Codice HTML in basso, vedrai il tuo codice. Copialo e incollalo in un post del blog o in un gadget, e il gioco è fatto.

Come puoi vedere, è uno strumento facile da usare con le opzioni necessarie per mappare le tue immagini online e creare banner, poster promozionali o intestazioni con più link. Per quest'ultimo, se desideri creare un'intestazione con più link, segui i primi passaggi descritti in questo post . Invece di aggiungere lo script menzionato, aggiungi il codice per l'immagine mappata.

fonte