Una mappa html è una immagine con zone “intelligenti” sensibili al passaggio del mouse e collegate a links verso altre pagine web o files, un cartina geografica è l’applicazione più diffusa del tag <map>Creare una mappa a partire di un’immagine è estremamente facile se utilizziamo uno strumento gratuito e open source come “The Gimp”. Invece di una cartina disegneremo un intero sito web con menù di navigazione grafico. Ho utilizzato questa tecnica per la home page introduttiva del mio sito: softisteria.org
Disegnamo l’header
Lanciamo Gimp e creiamo un’immagine con fondo trasparente di dimensioni 800×200 px
Procuriamoci una bella texture visitando il magnifico sito cgtextures , per esempio del legname dipinto per l’header che ritaglieremo con un altezza di 200 px, quindi creiamo il layer header di 800×200 px (Maius+Ctrl+N) e incolliamo qui la texture, per il titolo scelgo un font molto grande (60px) applico un’ombra con uno spostamento x e y di 8 e un raggio di sfocatura pari a 3 e trasparente al punto giusto, quindi cancello il titolo e mi resta l’ombra che produce un effetto come di una scritta sbiadita sul legno, posso inoltre ruotare il layer che contiene l’ombra.
Il passo successivo è procurarsi delle icone “social network” originali, andiamo su jankoatwarpspeed e ci scarichiamo un bellissimo set di icone fatte a mano con il programma artrage (ottimo ho la versione freeware)
Torniamo a Gimp e creiamo un layer 48×48 per ogni icona che vogliamo usare, esempio: rss, delicious, twitter, ruotiamo alcune icone e inoltre useremo anche il logo circolare di wordpress per sperimentare le diverse forme, cerchio poligono e rettangolo con cui possiamo creare delle zone di selezione. Passiamo quindi a creare tre testi: home, about e contacts che serviranno come menù di navigazione, ricordo che con Gimp (digitando Ctrl+Alt+’ ) è possibile visualizzare una griglia per posizionare oggetti in modo preciso. Infine creando un nuovo layer e lo strumento di riempimento sfumato (da primo piano a trasparenza) creiamo un effetto di ombre, per esempio trasciniamo il mouse da ogni angolo verso il centro, il risultato è il seguente:
Creiamo la mappa html
Salviamo il progetto in formato xcf, per poterlo editare di nuovo e salviamo una versione in formato jpg che ci servirá per creare la mappa. Apriamo il jpg ed attraverso il menù Filtri accediamo allo strumento mappa web:
eseguiamo selezioni rettangolari dei link alle pagine del sito, una circolare per il logo di wordpress, una rettangolare per delicious e due poligonali seguendo il contorno dell’uccellino di twitter e del logo Rss, questo strumento è molto semplice da usare, disegnamo il perimetro lo chiudiamo con un doppio clic e appare una finestra dove possiamo creare il link ad una pagina web, a un file, a una mail o a un servizio ftp. Quando abbiamo finito salviamo con nome ed otteniamo un file di testo con estensione .map, questo file contiene il codice da inserire nella nostra pagina web nel punto dove vogliamo posizionare l’immagine. Il lavoro è già finito e la mappa funziona, però manca il tocco finale: un effetto al passaggio del mouse, per esempio colorare l’area con il link. Possiamo utilizzare lo script jQuery maphilight, che ci permette di evidenziare i contorni con un bordo colorato e/o di riempire la zona con colori solidi o trasparenti.
In questo pacchetto ho incluso un esempio funzionante con l’immagine originale Gimp e la mappa jpg: 
Popularity: 97% [?]
Related posts:
Il mio sito è ancora in costruzione (lycos). Non sono riuscito ad evidenziare i bordi, i contorni di foto scattate con Olympus 570UZ usando GIMP. Si può? Cordialmente
In generale gimp può lavorare con moltissimi formati grafici, le foto che estensione hanno? jpg, bmp ?
Se mi mandi una foto di esempio ci posso provare io.
Ciao
ciao scusa io vorrei fare una pagina in cui con il mouse posso selezionare la zona di una griglia in cui poter poi caricare il mio file,,,,del tipo che ho trovato in questa pagina web http://pixel.3viso.com/get_pixels.php?step=2
potresti per favore dirmi come fare? grazie mille!!!
Ottimo!! Proprio quello che cercavo!
L’unica cosa è che non sono riuscito ad utilizzare lo script
“jQuery maphilight”… ho scaricato il plugin dal sito da te linkato ma non sono riuscito ad installarlo. Sapresti indicarmi come fare? (xubuntu+gimp)
Intanto… grazie davvero per questo post/tutorial.
Ciaux
Ciao Fab grazie per la visita.
Allora dopo aver scaricato jquery dovrai scompattarlo, avrai bisogno solo di alcuni files:
jquery-1.2.3.pack.js (cercalo nella directory “docs”)
jquery.metadata.min.js (cercalo nella directory “docs”)
jquery.maphilight.min.js (si trova nella directory principale del pacchetto che hai scaricato).
Inseriscili insieme ai files della tua pagina web, se usi una sottodirectory dovrai fare riferimento ad essa nelle righe: script src = …. type=”text/javascript”
Perfetto, ho inserito i files nella cartella contenente i files della pagina web come da te indicato. Adesso vorrei capire semplicemente come vado a colorare la zona interessata e a dare eventualmente una diversà opacità e a farlo appunto interagire con il plugin maphilight? (come l’esempio da te realizzato).
Grazie ancora
Ciaux
Ciao
Il concetto è semplice, puoi avere zone circolari, poligonali o rettangolari, lo script deve conoscere le coordinate, il colore e l’effetto che vuoi dargli. Le coordinate si ottengono utilizzando Gimp -> Filtri -> Mappa Web, tu disegni i contori e questo filtro produce del codice che puoi utilizzare come ho spiegato nel post (sezione: Creiamo la mappa Html).
Osserva il mio esempio dovrai modificare il codice nelle linee: area class=”stroke:false,fillColor:’6633FF’,fillOpacity:0.3″ shape=”circle”