Come generare online una mappa immagine in HTML

Come generare online una mappa immagine in HTML

Oggi vi spiego come creare una semplice mappa immagine con un generatore online. Il tutorial è rivolto ai webmaster, ed il livello è elementare.

La mappa immagine di questo tipo può essere utile in un semplice sito statico creato in html.

Per prima cosa salvate la seguente immagine che utilizzerò nel tutorial:



Poi collegatevi al seguente sito e cliccate sul pulsante "Select Image from My PC":
https://www.image-map.net/



Selezionate dal computer l'immagine scaricata in precedenza e cliccate su Apri:



L'interfaccia sarà la seguente:




In basso a sinistra è possibile scegliere la forma della selezione (Rettangolare, Poligonale o Circolare):



Con una selezione di tipo Poly è possibile creare un contorno abbastanza preciso in base alle necessità. Per creare la selezione basta cliccare con il mouse seguendo il contorno dell'immagine da collegare ad una pagina web:



A questo punto scrivete nel campo Link il nome o il percorso della pagina html da collegare alla mappa; scegliete un titolo (che comparirà quando si passa con il mouse sopra l'isola) e il target del link tra i seguenti:
 

Valore

descrizione

_blank

Consente l’apertura della pagina in una nuova finestra

_parent

Consente l'apertura della pagina nel frame principale

_self

Consente l'apertura della pagina nello stesso frame

_top

Consente l'apertura della pagine nell'intera finestra del browser (uscendo da tutti i frame)




Per creare ulteriori collegamenti cliccate sul pulsante Add New Area.

Dopo aver "disegnato" la mappa cliccate sul pulsante Show me the code:



Si aprirà una finestra popup con il codice generato da copiare. Selezionatelo e copiatelo su un blocco note:





Salvate il file con estensione .htm per creare una pagina web.



Quando passerete sull'immagine di Vulcano comparirà il titolo che avete impostato in precedenza:


A questo punto non resta che creare una pagina web su Vulcano con il nome vulcano.htm. Cliccando sull'isola si aprirà la pagina web creata:

Sostieni il mio sito con un acquisto qualsiasi su Amazon da questo link:
https://amzn.to/2P3osjl

Letto 487 volte Ultima modifica il Martedì, 21 Maggio 2019 15:56

Se ti sono stato utile e il mio sito ti sembra interessante supporta il mio lavoro con una donazione libera su Paypal (paypal.me/robertopd79) o dai un'occhiata alla mia "lista dei desideri su Amazon" cliccando sulla seguente immagine:

Richiedi un tutorial