LE MAPPE

Per inserire, all'interno di un documento HTML, un'immagine clickabile vi sono due possibilità:

server side image map
  richiede uno specifico supporto da parte del server. Il client invia le coordinate del punto nel quale l'utente ha clikcato al server, il quale restituisce il nome del file che deve essere visualizzato in risposta all'azione dell'utente. L'attributo HREF dell'elemento A indica l'indirizzo del server: tipicamente uno script di nome imagemap o htimage.

client side image map
  richiede un browser che supporti gli elementi MAP ed AREA. Usando tali elementi è possibile associare particolari zone dell'immagine a documenti HTML.

Un esempio dell'uso di IMG con l'attributo ISMAP per creare una mappa è il seguente:

<A HREF="http://www.hut.fi/cgi-bin/imagemap/Pictures/english.map">
<IMG HEIGHT="400" WEIGHT="400" SRC="http://www.hut.fi/Pictures/english.gif ALT="Helsinki University of Technology" ISMAP">
</A>

In questo caso il server interpreta la prima parte dell'indirizzo HTTP (www.hut.fi/cgi-bin/imagemap) e cerca al suo interno lo script imagemap che serve assieme al file english.map per associare le coordinate dell'immagine ai file da visualizzare. Il file english.map è un semplice file testo con le seguenti indicazioni:

default home.html
rect (x1, y1) (x2, y2) pippo.html
circle (x, y) radius pluto.html
pol (x1, y1) (x2, y2).....(xn, yn) paperino.html

Per implementare una mappa clikcabile con il linguaggio HTML si ricorre all'elemento MAP, la cui sintassi è la seguente:

<MAP NAME=name>
AREA elements
</MAP>

L'attributo NAME è una stringa, sensibile alle lettere maiuscole, che ha un riferimento nell'attributo USEMAP dell'elemento IMG. L'elemento AREA ha la seguente sintassi:

< AREA HREF="URL" SHAPE=name COORDS="x1, y1, x2, y2">

L'attributo SHAPE definisce la forma della hotzone e può avere i seguenti valori: RECT, CIRCLE, POLY. Di default assume il valore RECT. Attraverso l'attributo COORDS vengono indicate le coordinate della zona. Ad ogni zona è associato un file attraverso il suo indirizzo http presente nell'attributo HREF. Vediamo un esempio:

<IMG SRC="navbar.gif" BORDER=0 USEMAP="#map1">

<MAP NAME="map1">
  <AREA HREF="guide.html" ALT="Access guide" SHAPE=RECT COORDS="0, 0, 118, 28">
  <AREA HREF="search.html" ALT="Search" SHAPE=CIRCLE COORDS="100, 100 , 20">
  <AREA HREF="shortcut.html" ALT="Go" SHAPE=POLY COORDS="150, 150 , 220, 220, 180, 180">
</MAP>

Se due o più regioni sono sovrapposte, la regione definita per prima prende la precedenza sulle altre.