Mappare Immagini Complesse con Fireworks

Spesso e volentieri nel lavoro del web designer ci troviamo a che fare con la mappatura delle immagini. Ci sono diversi modi per mappare le immagini, come in Photoshop, in Illustrator e in tanti altri. Ma oggi in questo articolo voglio approfondire come mappare immagini complesse con FireWorks. L’idea di questo semplice tutorial mi e’ stata suggerita da un utente che aveva la necessita’ di mappare l’immagine di una regione italiana. Bene, iniziamo. Facciamo conto di voler mappare l’immagine di una regione italiana per riuscire a rendere cliccabili le varie province che la compongono. La mia immagine di partenza e’ questa:

Perche’ l’Abruzzo? E’ la prima regione in ordine alfabetico! Senza questa precisazione, non potevo continuare il tutorial.

Apriamo la nostra immagine con FireWorks e ci troviamo in questo scenario:

Adesso selezioniamo dal nostro pannello degli strumenti, lo strumento Punto Attivo Poligonale

Una volta selezionato questo strumento andiamo a cliccare nel primo bordo della nostra immagine per iniziare la mappatura

Appena cliccato il primo punto, nella timeline in fondo al pannello di Fireworks apparira’ una finestra che ci informa sul colore da utilizzare per la mappatura, in maniera da distinguere una provincia dall’altra.

Inoltre ci da’ la possibilita’ di inserire un HREF e un ALT per la porzione di immagine mappata.

Fatto questo, continuiamo a cliccare i bordi della porzione di immagine, in maniera abbastanza speculare, cosi’ da ottenere una mappatura fedele sull’immagine originale.

Questo e’ il risultato della prima provincia.

Una volta fatto questo, ripetiamo lo stesso procedimento per le altre province da rendere cliccabili, magari cambiando colore di sovrapposizione per rendere piu’ scorrevole il nostro lavoro.

Ecco in questo preciso istante abbiamo la nostra immagine della regione Abruzzo completamente divisa per le sue quattro province.

Adesso non ci resta che esportare il tutto in maniera che rimanga traccia della nostra mappatura.

Andiamo sul menu’ File -> Esporta e dal menu’ che si apre, andiamo a selezionare:

alla voce Esporta, selezioniamo HTML e Immagini

alla voce HTML, selezioniamo esporta HTML

come dalla seguente immagine

A questo punto, nel percorso che abbiamo scelto per il salvataggio, ci troveremo un file nome.html e un’immagine.

Se provate ad aprire il file vedrete l’immagine della regione Abruzzo e se passate su ogni singola provincia vedrete che e’ resa cliccabile.

Adesso bisognerebbe integrare il file HTML con del codice in Javascript per rendere la nostra immagine onmouseover di colore diverso per rendere piu’ evidente la selezione di ogni singola provincia.

Per fare questo, che e’ una pratica molto semplice, vi rimando al mio prossimo tutorial, dove vedremo come rendere piu’ bello, attraente e fruibile il click e il passaggio del mouse sulla nostra immagine di partenza.

Oggi ci possiamo accontentare di aver mappato fedelmente la nostra immagine di una provincia; per fare pratica potete iniziare a mappare qualsiasi regione italiana. Per ogni dubbio, incertezza o richiesta, sono sempre qui, domandate pure.

Alla prossima!