Dimensione testo

Come generare online una mappa immagine in HTML

  • Posted on:  Giovedì, 31 Gennaio 2019 09:23
  • Scritto da 

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:

Letto 45 volte Ultima modifica il Giovedì, 07 Febbraio 2019 17:24

Lascia un commento

Grazie per il commento! Verrà pubblicato dopo una revisione da parte dell'amministratore del sito.

Categorie tutorial