Collegamenti ed immagini

File di esempio: esempio13.htm

E' possibile associare un collegamento ipertestuale ad una immagine. Per fare ciò si utilizza la seguente sintassi:

<A HREF="destinazione"> <IMG SRC="nome_file.tipo" BORDER="0" > </A>

In questo modo facendo clic sull'immagine ci si sposta nella pagina di destinazione.
L'attributo BORDER="0" viene inserito per eliminare il bordo (blu) che il browser aggiunge sull'immagine attiva (collegamento, su cui è possibile cliccare).

E' anche possibile creare delle immagini in cui ad ogni zona dell'immagine corrisponde un link diverso: sono le cosiddette mappe immagini.
La sintassi è la seguente:

All'interno del TAG <IMG> si deve aggiungere l'attributo USEMAP:

<IMG SRC="nome_immagine" USEMAP="#nome_mappa" >
dove nome_mappa è un nome scelto per rappresentare la mappa.
Si deve poi definire il tipo di mappa. Per fare ciò si usa il TAG MAP mediante la seguente sintassi:

<MAP NAME="nome_mappa">...</MAP>
in questo modo si predispone la definizione della mappa.
A questo punto tra i TAG <MAP> e </MAP> si devono individuare le aree cliccabili.

<MAP NAME="nome_mappa">
<AREA .....>
...
<AREA .....>
</MAP>

All'interno del TAG AREA si specifica la regione cliccabile:

<AREA SHAPE="tipo" COORDS="coordinate_pixel" HREF="destinazione" >

dove SHAPE: indica la forma dell'area attiva e COORDS le sue coordinate.
- SHAPE="rect" - COORDS="n1,n2,n3,n4" dove n1,n2 sono le coordinate del primo pixel in alto a sinistra e n3,n4 quelle dell'ultimo pixel in basso a destra.
- SHAPE="circle" - COORDS="n1,n2,n3" dove n1,n2 sono le coordinate del centro ed n3 la lunghezza del raggio.
- SHAPE="poly" - COORDS="n1,n2,n3,n4,...n9,n10" dove n1,n2 n3,n4, ... sono le coordinate (a coppie) dei vertici del poligono.