Immagini o mappe cliccabili

Il codice da scrivere per ottenere una immagine con la proprietà che essa sia suddivisa in tante parti ciascuna delle quali sia collegata ad un particolare file, è:
<center>
<map name="menu1">
<area shape="rect" coords="136,75,177,119"  target="_top" href="bin.htm" onMouseOver="window.status='Collegamento a bin.htm';return true">
<area shape="rect" coords="72,192,103,212"  target="_top" href="bun.htm" onMouseOver="window.status='Collegamento a bun.htm';return true">
<area shape="rect" coords="207,192,247,217" target="_top" href="ba.htm" onMouseOver="window.status='Collegamento a ba.htm';return true">
</map>
<img SRC="triang.gif" BORDER=0 usemap="#menu1" >
</center>

L'immagine triang.gif (penultima riga) è suddivisa in aree di forma rettangolare di ciascuna delle quali  bisogna indicare le coordinate in pixels (vertice in alto a sinistra e in basso a destra). La prima area è collegata al file bin.htm, la seconda al file bun.htm e la terza a ba.htm. Quando il mouse si trova sopra l'area rettangolare si evidenzia il messaggio 'Collegamento a .... ".

Per inserire il codice nel file si può seguire (nel Composer):
Edit -> Html Source -> programma Blocco Note -> scrivere il codice o incollarlo memorizzare, chiudere e ritornare nel composer, rispondere si per aggiornare la pagina.
E' chiaro che il file contenente l'immagine deve trovarsi nella stessa cartella del file html.
Per determinare le coordinate dei rettangoli individuati nell'immagine, si può utilizzare il Paint di Windows
 

 
indice