www.sitopreferito.it

HOME	CHAT	WEBCAM	SERVIZI	SPECIALI	CURIOSITA'
BELLEZZE	FORUM	METEO	RUBRICHE	1000LINKS	ANNUNCI GRATUITI


	*Il portale* della Tua zona

14. Mappe di immagini

L'HTML consente di "dividere" un'immagine (.gif., .jpg ecc.) in differenti aree. Ogni area può essere quindi associata ad un link <A>...</A> che consente il richiamo di un altro documento.

Facciamo degli esempi.

Immaginiamo di visualizzare l'Italia divisa in regioni politiche e di associare ad ogni regione un collegamento al documento che illustra l'economia, i costumi, i dati demografici e le etnie di essa. Sarà sufficiente un clic del mouse in qualunque punto della regione prescelta per vedere i dati ad essa associati. Ancora, con l'immagine di un uomo, cliccando sulle varie parti del corpo si potrebbero avere informazioni sui muscoli, le ossa, il sistema venoso e nervoso di quella parte.

Da ciò si desume che le mappe di immagini (Image Map) hanno una versatilità notevole ed offrno la possibilità di rendere il documento molto accattivante oltre che consentire una rapida navigazione tra vari documenti.

Cosa è una "mappa" in HTML. Essa non è altro che un file, generalmente con estensione .map che, associato ad una immagine ed alla divisione in aree di essa,

Per definire che un'immagine è una mappa si usano i comandi:

<IMG SRC="immagine1" ISMAP USEMAP="mappa">
MAP NAME="mappa">
<AREA SHAPE="RECT" HREF="file1.html" COORDS="x1,y1,x2,y2">
<AREA SHAPE="CIRCLE" HREF="file1.html" COORDS="xc,yc,xt,yt">
<AREA SHAPE="POLYGON" HREF="file1.html" COORDS="x1,y1,x2..">
</MAP>

E' necessario innanzitutto visualizzare l'immagine che sarà definita come mappa navigabile. Per definire che essa è una mappa navigabile occorre inserire nel tag <IMG> l'attributo ISMAP. Dopodichè, per definire le aree dell'immagine che saranno oggetto della mappa, è necessario informare il browser dove cercare tali definizioni: ciò viene fatto con l'attributo USEMAP che indica il nome della mappa. Quindi, con il tag <MAP>, creiamo la mappa (il cui nome dovrà corrispondere con quello precedentemente indicato in USEMAP) ed all'interno di questo comando useremo i comandi <AREA SHAPE="tipo" HREF="file_collegato" COORDS="x1,y1,x2,y2" per identificare le singole aree, il tipo di forma di ciascuna area e le coordinate cartesiane dell'area rispetto all'immagine.

Descriviamo quindi i dettaglio i vari tag:

<IMG SRC="nome_imm" ISMAP USEMAP="nome_mappa">
Il "nome_imm" è il nome dell'immagine da visualizzare.

ISMAP
informa il browser che l'immagine visualizzata dovrà essere trattata come mappa.
USEMAP="nome_mappa"
identifica il nome della mappa che dovrà essere applicata all'immagine sopra descritta che dovrà essere definito con <MAP</MAP>.

<MAP NAME="nome_mappa"></MAP>
Questo comando definisce che quanto contenuto al suo interno rappresenta la definizione di una mappa di nome "nome_mappa". Il nome è utilizzato all'interno del comando <IMG... USEMAP=".."> per farvi riferimento.
<AREA></AREA>
Questo comando può essere utilizzato solamente all'interno di un tag <MAP> per identificare le aree oggetto di un collegamento e per specificare quest'ultimo. Gli attributi sono:

SHAPE="tipo_forma" COORDS = "coordinate"
Il tipo di forma che può essere mappato nelle immagini può essere un cerchio, una rettangolo od un poligono e, a seconda del tipo di forma sarà necessario darne le coordinate in maniera differente, come nella tabella seguente:

tipo_forma

coordinate

Note

RECT

x1,y2,x2,y2

L'area è un rettangolo con i vertici nei punti x1,y1 e x2,y2

CYRCLE

xc,yc,xt,yt

L'area è un cerchio che avrà il centro nei punti xc,yc e sarà tangente al punto xt,yt

POLYGON

x1,y1,x2,y2,....,xn,yn,x1 ,y1

L'area è un poligono che unirà i punti indicati con x.., y.. in sequenza e che dovrà chiudersi nuovamente ai punti x1,y1

Anche se sembra abbastanza complesso, in realtà praticamente tutti i programmi di grafica consentono di visualizzare le coordinate di ogni immagine e quindi, è facile individuare le cooordinate necessarie.

Comunque, esistono numerosi programmi reperibili su Internet che consentono di creare le mappe automaticamente, identificando le varie aree tracciandole con il mouse.

Vediamo ora un esempio pratico dell'uso delle mappe.

PRIVACY POLICY | NOTE LEGALI

I loghi, le immagini e i marchi riportati nel sito e nelle vetrine sono di proprietà dei rispettivi proprietari
E' vietata la riproduzione totale o parziale del sito