[TIPS & TRICKS] Le mappe cliccabili Come inserire una mappa cliccabile nel Sito Web

Settembre 2010

Avete mai pensato di inserire allinterno delle vostre pagine web unimmagine sulla quale i visitatori possano cliccare su pi punti per visualizzare dettagli o schede diverse, insomma una image map? Questo genere di immagini cliccabili suddivise in regioni, in effetti, possono risultare utili in diversi frangenti: per esempio, per contestualizzare foto e info su un percorso, per visualizzare schede esplicative su una diagramma, oppure per linkare risorse diverse e renderle disponibili attraverso una mappa. Qualunque sia il motivo per cui vogliate usarle, ora vedremo come poterlo fare in WebSite X5 Evolution 8.

SCENARIO:
Ipotizziamo di essere unagenzia immobiliare, uno studio di architettura o unimpresa costruttrice e di voler far vedere, in unapposita pagina del nostro sito Web, un nostro nuovo progetto. Lidea di presentare la pianta della villa e di mettere su ogni stanza un link per aprire un rendering in 3D che simula come si presenter lambiente una volta terminata la costruzione.

PRELIMINARI:
I materiali che dobbiamo preparare sono molto pochi: Limmagine della pianta. I rendering 3D delle diverse stanze, opportunamente convertite in un formato idoneo alla pubblicazione online (JPG).

CODICE HTML:
Per procedere necessario spiegare pochi comandi di HTML. Come abbiamo gi detto, le immagini cliccabili suddivise in regioni vengono chiamate image map. Ogni parte cliccabile viene, invece, chiamata hot spot. Per definire una mappa si utilizza il seguente codice : <MAP NAME="nome"> <AREA SHAPE="forma" COORDS="x,y,z..." HREF="link" TITLE="testo" ALT="testo" /> </MAP> <IMG SRC="immagine" USEMAP="#nome" /> Vediamo un po pi nel dettaglio i tag e gli attributi usati per realizzare una mappa: NAME="nome" Identifica il nome da dare alla mappa in modo da poter essere richiamato all'interno del tag <IMG> e pi precisamente nell'attributo USEMAP. SHAPE="default/rect/circle/poly" Stabilisce la forma da dare a una regione cliccabile all'interno dell'immagine. I possibili attributi sono: default: include tutta la regione e, quindi, non ha bisogno di coordinate. rect: disegna un rettangolo. Le coordinate da specificare sono due coppie: il punto in alto a sinistra e quello in basso a destra. circle: disegna un cerchio. Occorre specificare le coordinate del centro del cerchio e la lunghezza del raggio.

poly: disegna un poligono. Le coordinate da specificare sono tutte quelle relative ai punti che definiscono i vertici del perimetro del poligono. HREF="link" Imposta un collegamento ipertestuale a cui deve portare una determinata regione dell'immagine. TITLE="testo" Definisce il testo visualizzato in nota al passaggio del mouse sulla zona delimitata dallattributo SHAPE. Questo attributo non compatibile con Internet Explorer che per le note utilizza il testo dellattributo ALT. ALT="testo" Definisce il testo alternativo per la zona delimitata dallattributo SHAPE.

Incomedia S.r.l. | www.incomedia.eu |www.websitex5.com

[TIPS & TRICKS]

PROCEDURA:

Settembre 2010

Adesso che abbiamo le immagini e conosciamo il codice da utilizzare, vediamo come creare la nostra mappa cliccabile allinterno di WebSite X5 Evolution 8. 1. In WebSite X5 Evolution 8, apriamo il progetto del nostro sito e, nel Passo 2 Creazione Mappa, inseriamo una Nuova Pagina, rinominandola Progetto Villa. 2. Facciamo doppio click sulla pagina appena creata e procediamo alla sua creazione. 3. Inseriamo tutti gli oggetti che ci occorrono per i testi e gli eventuali elementi decorativi che abbiamo previsto, disponendoli secondo la struttura di impaginazione che preferiamo. 4. Per la mappa, inseriamo un Oggetto HTML nella posizione desiderata e accediamo al relativo editor: creiamo il codice HTML utilizzando le istruzioni che abbiamo visto in precedenza. <MAP NAME="pianta_villa"> <AREA SHAPE="rect" COORDS="71,133,385,289" HREF="files/stanza.jpg" TITLE="clicca per vedere come sar il tuo salotto" ALT=" clicca per vedere come sar il tuo salotto" /> </MAP> <IMG SRC="files/piantina.jpg" USEMAP="#pianta_villa" /> Per meglio comprendere il codice HTML appena composto guardiamo le immagini seguenti: piantina.jpg stanza.jpg

Limmagine piantina.jpg quella da rendere cliccabile: la selezione in fucsia evidenzia la regione rettangolare su cui impostare il collegamento e le coordinate riportate in parentesi identificano i punti che occorrono per definire larea. Limmagine stanza.jpg , invece, quella che viene aperta su clik. A prescindere da dove sono archiviati, i file utilizzati nelloggetto HTML vengono automaticamente copiati allinterno della sotto-cartella /files. E per questo motivo che allinterno del codice scritto per la mappa cliccabile i percorsi delle immagini utilizzati sono stati scritti in forma relativa: files/piantina.jpg. 5. Per fare in modo che le immagini utilizzate nella mappa vengano correttamente esportate con il progetto e pubblicate online, clicchiamo sul pulsante File collegati al codice HTML: attraverso la finestra richiamata creiamo la lista di tutte le immagini utilizzate (piantina.jpg e stanza.jpg).

Incomedia S.r.l. | www.incomedia.eu |www.websitex5.com

[TIPS & TRICKS]

Settembre 2010

6. Per evitare che vengano visualizzate le barre di scroll orizzontali e/o verticali sulla mappa, verifichiamo che lOggetto HTML inserito si sviluppi su un numero adeguato di celle; controlliamo anche di aver opportunamente definito il valore del parametro Altezza delloggetto HTML : nel nostro caso, dato che limmagine piantina.jpg di 500x503 px, impostiamo laltezza delloggetto HTML a 520 px in modo da poter avere un minimo di spazio intorno.

NOTA:
Nel nostro esempio abbiamo inserito ununica area cliccabile allinterno della mappa ma avremmo potuto crearne anche altre: per farlo, sufficiente aggiungere dei tag <AREA> e settarli adeguatamente. Non ci sono particolari limiti al numero di aree attive inseribili in una mappa, occorre solo fare attenzione che non si sovrappongano.

Abbiamo concluso: con poche semplici righe di codice abbiamo ottenuto il risultato che ci eravamo prefissati. Ovviamente il codice proposto pu essere completato con ulteriori link e perfezionato, ma rappresenta sicuramente unottima base di partenza.

Incomedia S.r.l. | www.incomedia.eu |www.websitex5.com