Come dividere una immagine con i comandi map e area.
ALLWEB free
Directory Web Script Linguaggi
Italiano Inglese Tutte
 
 24 Apr 2017
aggiungi in preferiti  
Home    Mappa directory    Script




Map:

Usando i tag html è possibile suddividere una immagine in più settori. Ad ogni settore può essere associato un link cliccabile. Vediamo il codice che dobbiamo usare:
<img src="prova1.jpg" usemap="#prova">

immagine di prova

Non dimenticate il cancelletto!!!!
In questo caso richiamiamo l'immagine "prova1.jpg" ma ancora non abbiamo ancora nessun link attivo perché non abbiamo descritto la mappa con nome "prova".
Vediamo il codice per descrivere una mappa all'interno di una immagine:
<map name="prova">
<area shape="rect" alt="prima area" href="html_immagini.php" coords="0,0,75,57">
<area shape="rect" alt="seconda area" href="html_link.php" coords="0,0,75,106">
</map>


Questo è il risultato:
prima area seconda area immagine di prova

Spiegazione:
Per prima cosa dobbiamo creare la mappa con i tag <map> e </map> ed associare un nome per il richiamiamo.

In secondo luogo suddividiamo la mappa con le aree. Per fare questo immaginiamo che il punto più in alto e più a sinistra dell'immagine sia il punto con la coordinata 0,0

Adesso dobbiamo sapere la forma (shape) dell'area:
  • shape="rect" Rettangolo. Si trova introducendo due coordinate, una per l'angolo in alto a sinistra, e l'altra per l'angolo in basso a destra (es. coords="0,0,75,57").
  • shape="circle" Cerchio. Si trova introducendo una coordinata per il centro ed un numero per il raggio (in pixel) (es. coords="58,62,60").
  • shape="poly" poligono. Per poligono intendiamo qualunque figura. Ogni coordinata verrà unita a quella seguente e l'ultima alla prima, un pò come il gioco enigmistico dove dobbiamo unire tutti i puntini numerati... (es. coords="38,124,49,136,40,175,17,178,18,130,26,133,38,124")
nohref il parametro nohref può essere inserito all'interno del tag area quando dopo aver dato la forma e le coordinate dell'area non vogliamo associare nessun link a tale area.
esempio: <area shape="rect" coords="0,0,75,57" nohref>