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:
Seguimi sui social per non perdere i prossimi aggiornamenti:
Sostieni il mio sito con una donazione libera su Paypal cliccando sul seguente pulsante: