CREARE IMMAGINI MAPPATE

SUGGERIMENTO

Il valore assegnato a USEMAP è un indirizzo URL standard. Questo è il motivo per il quale nomemappa è preceduto dal simbolo #. Come nel caso dei link che conducono all'interno di una pagina Web, il simbolo # chiede al browser di ricercare nomemappa all'interno della pagina Web corrente. Se l'immagine a mappa è molto complessa, il relativo codice può essere conservato in un file HTML distinto al quale e possibile accedere utilizzando un indirizzo URL standard.

6885649596

Prima di cominciare spieghiamo che cosa sono le immagini mappate. Questo tipo di oggetto non è altro che un'immagine in cui è possibile, cliccando in punti diversi di essa andare a pagine web differenti. Questa possibilità è utile in diversi modi all'interno di un sito web: Per esempio si può visualizzare una cartina geografica e permettere di scegliere la regione da visitare oppure si può disegnare un menù di scelte graficamente molto elaborato come un unica immagine. Ecco un'esempio di immagine mappata:

Scegli il Continente

Clicca qui per vedere il codice html

I TAG <MAP> E <AREA>

Per includere un'immagine a mappa in un documento HTML si deve usare il tag <MAP> che ha la seguente sintassi:

<MAP NAME="nomemappa"> coordinate e lìnk </MAP>

II valore assegnato all'attributo NAME è il nome della mappa. Questo è il nome che verrà utilizzato più avanti per associare l'immagine a mappa alle coordinate e ai relativi riferimenti ai link; dunque, se in una pagina visone più immagini a mappa, si dovranno definire più tag <MAP> con nomi differenti. Fra i tag <MAP> e </MAP> si deveno specificare le coordinate di ogni area dell'immagine e i relativi link, un po' come si è visto per le immagini a mappa funzionanti sul server. Ma questa volta le coordinate devono essere definite all'interno di un nuovo tag chiamato <AREA>.

L'attributo SHAPE defìnisce la forma dell'area .e può assumere i valori RECT POLY e CIRCLE. L'attributo COORDS: elenca le coordinate che definiscono l'area. Di seguito si può vedere la serie di coordinate di una forma. POLY, dove ogni combinazione x,y rappresenta un vertice del poligono:

<AREA SHAPE=''poly" COORDS="x1, y1, x2, y2. x3, y3, ., xN, yN" HREF="url">

Nel caso delle forme rettangolari, x1,y1 corrisponde all'angolo superiore sinistro del rettangolo mentre x2.,y2 corrisponde all'angolo Opposto:

<AREA SHAPE="rect" COORDS="x1, y1, x2, y2" HREF="url">

Nel caso delle forme circolari, x, y rappresenta il centro della regione circolare di raggio raggio:

<AREA SHAPE="circle" COORDS="x, y, raggio" HREF="url">

L'ultimo attributo da definire per ogni tag <AREA> è HREF. A tale attributo si deve assegnare l'indirizzo URL della pagina così come avviene normalmente per il tag <A>, specificando il percorso relativo. Inoltre è possibile assegnare all'attributo HREF il valore di "NOHREF" per definire quelle regioni dell'immagine che non contengono alcun link.

L'ATTRIBUTO USEMAP

Dopo aver definito l'immagine a mappa con il tag <MAP>, l'ultimo passo consiste nell'inserimento dell'immagine nella pagina Web. A tale scopo si deve utilizzare una particolare forma del tag <IMG> che include il nuovo attributo USEMAP (è un attributo differente rispetto all'attributo ISMAP dedicato alle immagini a mappa sui server). La sintassi dell'attributo USEMAP è la seguente:

<IMG SRC="immagine.gif" USEMAP="#nome_mappa">

Dove nome_mappa è il nome della mappa definita dal tag <MAP NAME="#/nome_mappa">.

MENU