Come creare una mappa immagine (immagine con aree cliccabili)

 Questo tutorial è stato scritto da me, 

quindi e' vietato copiare, modificare, anche se solo parzialmente, o 

postarlo altrove come proprio.

Grazie

Dopo aver passato un fine settimana a capire come creare una mappa di immagine ho deciso di scrivere questa guida, sperando che possa essere di aiuto a qualcuno.

Dunque prima di tutto…. cosa è una mappa di immagine? E’ un’immagine che presenta più aree cliccabili ossia aree che rimandano a un determinato link.
Ad esempio, ammettiamo di voler creare un immagine come questa:

dove ci sono sei aree/iconcine (la figura di una donna, una busta, l'icona di twitter, ecc), andando sopra e cliccando sulle varie figure (icone) voglio che si apra il collegamento a:

- il mio profilo

- un’applicazione per contattarmi/scrivermi un messaggio

- la mia pagina di twitter

- il mio contatto yahoo

- il mio contatto ICQ

- la mia biblioteca (sito anobil)

1. La prima cosa da fare è creare un immagine con qualsiasi programma di grafica, io ho utilizzato Gimp e l’ho chiamata “Sfondo menu2 - con icone”.

2. L’immagine così creata va caricata nel web (l’immagine deve essere online) in uno dei tanti siti che forniscono uno spazio (es. Picasa Web,  Flickr )

Annotatevi il link diretto all’immagine che avete caricato perché vi servirà alla fine di questa guida.

3. Adesso che l’immagine è online bisogna rendere le varie aree cliccabili ossia procedere alla creazione di una mappa di immagini. Per farlo si possono utilizzare sia programmi online (es. - Image Map Editor) sia programmi precedentemente installati sul computer (io ho utilizzato Mapspinner   che è un sofware per Mac ma in rete ne trovate anche per windows).  In questa guida farò riferimento al MapSpinner.

4. Aprite il programma e scegliete l’opzione New (create new imagemap). 

Caricate l’immagine, che avete creato con il programma di grafica, dal vostro computer.

Quindi scegliere “next” e poi “finished”. Si apre una finestra con:

1.     l’immagine caricata che costituisce l’area di lavoro e che in questo caso è formata da varie icone (icona donna, icona busta, icona twitter, icona yahoo ecc)

2.     la parte degli strumenti di selezione

3.     sezione dove viene creato il codice della mappa immagine

Procedere con la prima area da selezionare  (in questo caso la prima icona sulla sinistra ossia l’icona donna), andare sulla barra degli strumenti (2), scegliere la forma rettangolare/quadrata (o anche circolare, come preferite) e selezionate l’icona donna come nella figura che segue:

A questo punto dalla barra degli strumenti in alto del programma scegliete “layout” e poi “edit area” :

Si aprirà una finestra di questo tipo:

 

Dove nello spazio link dovete mettere il collegamento che si deve aprire quando si clicca in quella icona (es. collegamento al mio profilo blogger: http://www.blogger.com/profile/14606190709197906447 )

In Alternative Text inserire un testo che può sostituire l’icona.  Questo testo viene utilizzato per sostituire la grafica per i browser di solo testo.

In ToolTip (Title) inserire un titolo che vogliamo dare a quell’icona/collegamento (è il titolo che viene visualizzato quando il mouse passa sopra all’icona).

In entrambi i casi io ho messo “my profile” come riportato in figura:

 

Chiudete questa finestra e procedete a fare la stessa cosa con le altre icone.

Alla fine, nell’area codice si sarà creato il codice della mappa d’immagine. Voi dovete prendere la parte del codice che va da <img src= ……. a </map>. Nella figura che segue ho segnato con due frecce l’inizio e la fine del codice da prelevare. 

Il codice sarà quindi di questo tipo:

<img src="Sfondo menu2 - con icone.png" width="298" height="66" usemap="#Sfondo menu2 - con icone" border="0">

<map name="Sfondo menu2 - con icone">

<area shape="rect" coords="13,9,59,56" href="http://www.blogger.com/profile/14606190709197906447" alt="My Profile" title="My profile">

</map>

5. A questo punto, nel codice che si è venuto a creare, dovete solo inserire al posto di “Sfondo menu2 - con icone.png” il link diretto alla pagina dove avete caricato l’immagine (vedi punto 2 di questa guida).

Finalmente avrete il vostro codice della mappa immagine che sarà di questo tipo:

<img src="indirizzo immagine" usemap="#nome mappa"/>

<map name="nome mappa">

<area shape="rect" coords="13,9,59,56" href="indirizzo pagina da aprire" alt="Alternative Text" title="Titolo/descrizione icona">

</map>

Per inserire nel vostro blog la mappa d’immagine appena creata basta mettere il codice in un gadget HTML/JavaScript.

Finito!!!

Spero di esservi stata utile.

Cri

n.b.. ringrazio Fabrizio e Iole per il prezioso supporto alla realizzazione della mia prima mappa immagine. 

p.s. Se avete trovato questa guida utile condividetela!!! Potete utilizzare i tasti qui sotto (Twitter, Facebook, ecc) e se lasciate anche un commento sarebbe gradito :)