sabato 2 aprile 2011

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 FabrizioIole 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 :)

18 commenti:

  1. Ciao Cri,
    hai fatto un ottimo lavoro con il tuo menu e sei stata chiarissima nello spiegare come realizzarne uno personalizzato.
    Complimenti!

    RispondiElimina
  2. Iole, grazie della visita e dei complimenti

    RispondiElimina
  3. Sei stata chiarissima, ho capito pur'io! Domani provo.

    RispondiElimina
  4. Bene, ne sono contenta. Fammi sapere se ti é stato utile e grazie di aver lasciato un commento

    RispondiElimina
  5. Grazie. Spero ti sia stato di aiuto

    RispondiElimina
  6. si chiara , ma io con windows e la mia poca esperienza non sono riuscita a creare la mappa cliccabile ....ed è urgente . qualcuno mi può aiutare?

    RispondiElimina
  7. Ciao. Quale è il problema? A quale punto della guida sei arrivata? Dimmi come posso aiutarti.

    RispondiElimina
  8. Ciao, ascolta ho creato la mappa ma non riesco ad inserirla in un post di Blogger, come faccio? se metto il codice non esce l'immagine o comunque non è clikkabile... Aspetto tue risposte...

    RispondiElimina
    Risposte
    1. Ciao Nicola;

      prima di tutto grazie di essere qui.
      Io non sono un esperta e ho riportato solo la mia esperienza ma ci provo ad aiutarti.
      Prima cosa. Hai provato ad inserire la mappa come gadget HTML/JavaScript, in un qualsiasi punto del blog (es. barra laterale), come indicato nella guida? Se sì, in questo caso funziona?

      Fammi sapere

      Elimina
    2. Grazie mille della risposta... Ma il mio problema è inserirla in un post... Perchè non riesco ad inserire il gadget Java/Html... Come si potrebbe fare?

      Elimina
    3. Nicola,

      ho chiesto conferma ad un amico, sicuramente più esperto di me.
      dovresti poter inserire il codice in un post con l'editor in modalità HTML. Vedi qui:

      http://screenshotperblog.blogspot.it/2012/11/come-passare-nelleditor-di-blogger.html?view=flipcard

      Hai già provato?

      Una domanda perchè non non mi è chiaro. Ho capito che hai necessità di inserire la mappa in un post ma, più in generale, non riesci ad inserire il gadget Java/Html da nessuna parte che non sia un post, es. nella colonna laterale? Il tuo blog è già online o ci stai lavorando?

      Attendo tue.

      Elimina
    4. Lateralemnte sono sempre riuscito questa è la prima volta che nn riesco... Penso perchè all'interno di un post... si il blog in questione è di un mio amico io lavoro solo su grafica http://www.spezio.blogspot.it

      Elimina
    5. Mi visualizza un punto interrogativo al centor dell'immagine...
      Se vuoi ti posso mandare in qualche modo il codice che ho creato

      Elimina
  9. Nicola,

    scrivimi un messaggio usando il l'apposito form sulla barra laterale, ti risponderò per mail.

    RispondiElimina
  10. ciao ti ho scritto un messaggio aspetto tue risp.. .grazie...

    RispondiElimina
  11. Ti volevo ringraziare per questo tutorial utile e chiaramente spiegato. Finalmente ho fatto la mappatura cliccabile di un header di Blogger con le icone social.
    L'unico dubbio mi è rimasto sul programma Mapspinner che ho scaricato e usato, nel programma non sono riuscita ad ottenere il codice, che invece ho ottenuto con l'ispezione della pagina web dove veniva visualizzato l'header mappato... l'importante è che alla fine ci sia riuscita :-)
    I programmi online sono più macchinosi da usare.

    RispondiElimina
    Risposte
    1. Ciao Cristina, sono lieta che il tutorial ti sia stato di aiuto in qualche modo e che tu sia riuscita a risolvere il tutto anche senza mapspinner. ;)

      Elimina

Inserite il commento e scegliete un profilo dal menu a tendina (es. account Google), potete anche scegliere il profilo “anonimo” ma, per cortesia, almeno firmate con un nick :)