www.sitopreferito.it

Corso di HTML
Introduzione
Convenzioni
Struttura di base
Scrivere in HTML
Formattazione
Paragrafatura
Immagini
Collegamenti
Liste
Colori e Sfondo
Tabelle
Multimedia
Forms
Imagemap
Frames
Appendice A
Appendice B
Appendice C

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.

<IMG SRC="italia.gif" WIDTH="249" HEIGHT="312" ISMAP USEMAP="#italia"></A>
<MAP NAME="italia">
   <AREA SHAPE="CIRCLE" HREF="regioni.html#umb" TARGET="frame" COORDS="122,131,9">
   <AREA SHAPE="RECT" HREF="regioni.html#sar" TARGET="frame" COORDS="21,168,76,233">
   <AREA SHAPE="POLYGON" HREF="regioni.html#cal" TARGET="frame"  COORDS="181,218, 199,218, 214,226, 196,269, 181,269, 181,218">
   <AREA SHAPE="POLYGON" HREF="regioni.html#sic" TARGET="frame"  COORDS="115,255, 173,253, 169,296, 109,266, 115,255">
   <AREA SHAPE="POLYGON" HREF="regioni.html#bas" TARGET="frame"  COORDS="183,182, 180,193, 187,210, 201,205, 203,194, 183,182">
   <AREA SHAPE="POLYGON" HREF="regioni.html#cam" TARGET="frame"  COORDS="151,171, 149,182, 150,194, 173,215, 182,203, 177,187, 182,181, 172,172, 151,171">
   <AREA SHAPE="POLYGON" HREF="regioni.html#pug" TARGET="frame"  COORDS="175,158, 194,158, 196,165, 188,170, 247,206, 240,217, 232,218, 208,199, 203,189, 185,177, 172,170, 175,158">
   <AREA SHAPE="POLYGON" HREF="regioni.html#mol" TARGET="frame"  COORDS="168,156, 152,162, 152,168, 159,170, 169,168, 174,162, 168,156">
   <AREA SHAPE="POLYGON" HREF="regioni.html#abr" TARGET="frame"  COORDS="149,137, 137,141, 136,148, 153,162, 168,155, 152,138, 149,137">
   <AREA SHAPE="POLYGON" HREF="regioni.html#laz" TARGET="frame"  COORDS="110,136, 104,144, 139,183, 150,171, 142,161, 132,156, 128,144, 110,139, 110,136">
   <AREA SHAPE="POLYGON" HREF="regioni.html#mar" TARGET="frame"  COORDS="121,106, 132,106, 149,125, 151,134, 141,135, 138,136, 132,130, 129,121, 121,110, 119,110, 119,108, 121,106">
   <AREA SHAPE="POLYGON" HREF="regioni.html#fri" TARGET="frame"  COORDS="136,33, 135,38, 128,44, 127,49, 138,58, 150,60, 150,38, 139,32,  136,33">
   <AREA SHAPE="POLYGON" HREF="regioni.html#ven" TARGET="frame"  COORDS="98,58, 98,66, 104,74, 119,77, 127,74, 129,63, 136,59, 126,53, 124,44,  133,36, 133,32, 129,30, 119,39, 117,46, 106,55, 98,58">
   <AREA SHAPE="POLYGON" HREF="regioni.html#emi" TARGET="frame"  COORDS="71,79, 76,70, 125,84, 131,102, 73,85, 71,79">
   <AREA SHAPE="POLYGON" HREF="regioni.html#tos" TARGET="frame"  COORDS="79,99, 97,146, 119,113, 80,93, 79,99">
   <AREA SHAPE="POLYGON" HREF="regioni.html#lig" TARGET="frame"  COORDS="32,91, 28,101, 39,100, 47,92, 55,87, 70,99, 77,95, 67,83, 43,87,  32,91">
   <AREA SHAPE="POLYGON" HREF="regioni.html#tre" TARGET="frame"  COORDS="91,25, 95,51, 106,53, 114,44, 123,34, 125,18, 109,21, 94,19, 91,25">
   <AREA SHAPE="POLYGON" HREF="regioni.html#lom" TARGET="frame"  COORDS="62,39, 57,64, 65,76, 71,67, 98,75, 91,62, 94,55, 90,47, 88,32, 88,29,  76,38, 71,31, 65,44, 62,44, 62,39">
   <AREA SHAPE="POLYGON" HREF="regioni.html#pie" TARGET="frame"  COORDS="64,80, 32,88, 16,61, 42,54, 48,44, 45,34, 50,30, 58,42, 51,66, 62,77,  64,80">
   <AREA SHAPE="POLYGON" HREF="regioni.html#val" TARGET="frame"  COORDS="25,53, 39,54, 41,44, 20,40, 27,54, 25,53">
</MAP>

 

 

PRIVACY POLICY | NOTE LEGALI

Home | Chat | Bellezze | Forum | Webcam | Meteo | Servizi | Rubriche | Speciali | 1000Links | Curiosità | Annunci Gratuiti

 

Per informazioni o suggerimenti sulla realizzazione del sito scrivere a webmaster@sitopreferito.it
Copyright (c)2002-2004 Tecno Idee srl
Per la pubblicità su questo sito:
info@sitopreferito.it

 

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