Guida di HTML - Le mappe immagine

Manuale di HTML

I collegamenti ipertestuali

Mappe immagine

Abbiamo visto come è possibile associare un collegamento ipertestuale ad una immagine; facendo click con il mouse sopra l'immagine si accede ad un'altra pagina web o un altro file. Mediante le mappe immagine è possibile utilizzare solo una porzione dell'immagine per il collegamento ipertestuale, destinando un'altra porzione dell'immagine ad un altro collegamento ipertestuale. Il principio è molto semplice, si suddivide una immagine in aree facilmente identificabili, e per ogni area si crea un collegamento. In tal modo, invece di fare click su un collegamento di testo o su una immagine si fa click su una porzione di immagine.

Non tutte le immagini sono adatte alla creazione di mappe immagine, devono essere immagini suddivisibili in zone di forme facilmente identificabili, cerchi, rettangoli o poligoni.
L'immagine di Nonna Papera riprodotta a lato non si presta bene ad essere utilizzata come mappa, perché non sapremo dividerla in parti distinte. Dovremmo cercare una immagine già divisa in pezzi distinti o comunque facilmente divisibile. Una immagine migliore può essere quella dell'Europa nel gioco del risiko, riprodotta qui sotto...

Per definire che una immagine è usata come mappa si utilizza l'attributo USEMAP="..." nel tag <IMG> che introduce l'immagine. Questo attributo assume come valore il nome che noi scegliamo di dare alla mappa, che è diverso dal nome dell'immagine. Supponiamo di aver scelto "maprisiko" come nome per la mappa dell'Europa disegnata sopra, la sintassi del tag diventa:
<IMG SRC="europe.jpg" BORDER="0" USEMAP="#maprisiko">,
ove il simbolo del cancelletto # sta ad indicare che la mappa è specificata in questo file, esattamente come l'uso dei segnalibri.

Ma ciò non basta; occorre definire la mappa. Per definire una mappa si utilizza il tag <MAP> e </MAP> che ha un solo attributo, il nome della mappa, NAME="nome", senza il simbolo del cancelletto #. La sintassi completa è allora <MAP NAME="maprisiko">.

Tra i due tag è specificata la mappa, indicando una ad una le aree sensibili, specificandone la forma, la posizione e il collegamento associato. Il tag da utilizzare è <AREA>, che non ha tag di chiusura. Il tag <AREA> accetta gli attributi SHAPE, COORDS, HREF e TITLE.
SHAPE="..." specifica la forma dell'area, e può essere "circle", "rect" oppure "poly", per indicare un cerchio, un rettangolo oppure in poligono.
COORDS="..." specifica le coordinate dell'area; per un cerchio si danno 3 numeri, separati da una virgola: la posizione del centro e il raggio; per un rettangolo si danno le coordinate delle estremità di una diagonale; per un poligono si danno le coordinate dei vertici in senso orario o antiorario.
HREF="..." specifica il collegamento ipertestuale a cui si riferisce quell'area, esattamente come un normale collegamento ipertestuale; l'indirizzo può essere assoluto o relativo e puntare a qualunque tipo di file.
TITLE="..." indica la descrizione che viene data all'area quando il puntatore del mouse ci passa sopra e serve a dare al visitatore informazioni riguardo al collegamento o all'area in questione.

Vediamo di applicare con un piccolo esempio le nozioni appena introdotte. Creiamo una mappa immagine in cui associamo a ciascuna area un collegamento ipertestuale di diverso tipo, in modo da far vedere come viene impiegato e i suoi effetti. Apriremo tutte le nuove pagine in una nuova finestra (mediante l'attributo TARGET="_blank") in modo da poter sempre rimanere in questa pagina della guida.

<HTML>
<HEAD>
<TITLE>Guida di HTML</TITLE>
....
</HEAD>

<BODY BGCOLOR="#EEDDCC">
<H2 ALIGN="center">Mappe immagine</H2>
Clicca su una regione dell'immagine per aprire una nuova pagina.
<MAP NAME="europa">
<AREA SHAPE="circle" COORDS="66,15,19" HREF="html.html" TITLE="L'indice di questa guida" TARGET="_blank">
<AREA SHAPE="poly" COORDS="52,50,49,59,36,59..." HREF="http://www.fabriziodeandre.biz" TITLE="Il sito su Fabrizio De André" TARGET="_blank">
<AREA SHAPE="rect" COORDS="4,101,57,147" HREF="mailto:michefe@libero.it" TITLE="Mandami una email">
<AREA SHAPE="poly" COORDS="62,131,72,131,86,147..." HREF="immagini/napoli.jpg" TITLE="Visualizza la foto di Napoli" TARGET="_blank">
<AREA SHAPE="rect" COORDS="68,80,118,106" HREF="#top" TITLE="Vai all'inizio di questo documento" TARGET="_blank">
<AREA SHAPE="poly" COORDS="73,40,77,74,91,66..." HREF="battle.exe" TITLE="Scarica il gioco della battaglia navale" TARGET="_blank">
<AREA SHAPE="poly" COORDS="129,25,120,40,123,72..." HREF="http://digilander.libero.it/mymp3/winrisk.exe" TITLE="Scarica il gioco del risiko" TARGET="_blank">
</MAP>
<CENTER>
<IMG SRC="europe.jpg" USEMAP="#europa" BORDER="0">
</CENTER>
Per l'area dell'Islanda abbiamo potuto scegliere una forma circolare; per l'Europa occidentale e per quella settentrionale abbiamo scelto una forma rettangolare ma forse non è un gran che. Per le altre aree abbiamo scelto forme poligonali.
Quanto ai collegamenti ipertestuali, per l'Islanda abbiamo messo un collegamento ad una pagina di questo server e quindi abbiamo utilizzato un indirizzo relativo, "html.html"; per la Gran Bretagna è stata indirizzata una pagina di un altro sito, e quindi mediante un indirizzo assoluto per l'Europa occidentale si è utilizzata un altro tipo di risorsa, e si è messo il collegamento di tipo "mailto:"; per l'Europa meridionale abbiamo collegato l'area ad una immagine da visualizzare; per l'europa Settentrionale e l'Ucraina abbiamo messo due programmi da scaricare, uno residente su questo server e uno su un altro sito, per cui abbiamo utilizzato un indirizzo relativo e uno assoluto.
....
</BODY>
</HTML>

Mappe immagine

Clicca su una regione dell'immagine per aprire una nuova pagina.

Per l'area dell'Islanda abbiamo potuto scegliere una forma circolare; per l'Europa occidentale e per quella settentrionale abbiamo scelto una forma rettangolare ma forse non è un gran che. Per le altre aree abbiamo scelto forme poligonali.

Quanto ai collegamenti ipertestuali, per l'Islanda abbiamo messo un collegamento ad una pagina di questo server e quindi abbiamo utilizzato un indirizzo relativo, "html.html"; per la Gran Bretagna è stata indirizzata una pagina di un altro sito, e quindi mediante un indirizzo assoluto; per l'Europa occidentale si è utilizzata un altro tipo di risorsa, e si è messo il collegamento di tipo "mailto:"; per l'Europa meridionale abbiamo collegato l'area ad una immagine da visualizzare; per l'europa Settentrionale e l'Ucraina abbiamo messo due programmi da scaricare, uno residente su questo server e uno su un altro sito, per cui abbiamo utilizzato un indirizzo relativo e uno assoluto.

....

Nel prossimo capitolo descriveremo come impostare diversamente una pagina mediante l'uso delle tabelle.

Articoli recenti

Mese attuale

Mese scorso

Anno scorso