Tu sei qui

Home ›

Image map

Inviato da andres il Dom, 02/04/2006 - 3:00am

Per image map si intente una mappa cliccabile che consente, all'interno di una singola immagine, di creare differenti aree di ritaglio, ad ognuna delle quali è possibile associare un link differente.

Esistono due tipi di image map:

  1. Client side

  2. Server side

Questa pagina sostituisce la spiegazione nelle dispense.

Client side image map

Per mappe cliccabili client side si intendono mappe che vengono interpretate senza alcun intervento da parte del server.

Lo sviluppatore inserisce nella propria pagina un'area in cui vengono definite le sezioni cliccabili della mappa e i link di riferimento.
Quando l'utente clicca in un punto mappato dell'immagine è il browser a riconoscere il posizionamento e il link di riferimento.

Per creare le image map è necessario avere:

1. l'immagine

2. la specifica delle sezioni attive e delle azioni ad esse collegate

Trovare le coordinate di un'immagine

Per conoscere le coordinate di un'immagine è sufficiente caricarla utilizzando la normale sintasi (tag <img>) con l'aggiunta dell'attributo ismap.

<A href="#">
<IMG src="pathname" [...] ISMAP>
</A>

Inserire un image map nel codice HTML

Per inserire invece nel codice un image map client side si utilizza la seguente sintassi:

<IMG SRC="menu.gif" usemap="#menu">

L'attributo usemap indica la localizzazione delle istruzioni di mappatura dell'immagine.
Il valore dell'attributo in questo caso è preceduto dal simbolo # in quanto è un link a una sezione etichettata del documento (label o ancore).
Il codice che associa ogni area ritagliata dell'immagine a un link è contenuto all'interno del tag <map>, che chiude e apre la sintassi.

Il tag <map> ha un attibuto name che permette di dare un nome alla sezione di mappatura (vedi ancore) e quindi di renderla richiamabile.

Ovviamente il valore dell'atributo usemap di <IMG> e dell'attributo name di <MAP> devono coincidere. L'attributo ismap ha come valore il valore dell'attributo name di <MAP> preceduto dal simbolo #, che indica un riferimento a una sezione etichettata del documento.

<MAP name="menu">

</MAP>
I comandi di mappatura sono introdotti dal tag <area>.

Comandi di mappatura: <AREA>

Si specificano delle aree dell'immagine e ad ogni area si associa la URL corrispondente

shape="rect" | "circle" | "poly" | "default" Indica la forma dell'area ritagliata all'interno dell'immagine (default indica l'azione associata all'immagine per le aree non coperte dalla mappatura; corrisponde a un rettangolo meno le zone giá selezionate all'interno di quell'area; le coordinate vanno quindi indicate come per un rettangolo)
coords="x1,y1,x2,y2" {per i rect, in alto a sin e in basso a destra} |
"x, y, r" {per i circle, coordinate centro e raggio} |
"x1,y1, x2,y2, x3,y3, ..."
{coordinate dei vertici, in ordine}		 Indica le coordinate dell'area selezionata
href="URL" Indica l'URL associata all'area
nohref Per impostare come non attiva una determinata area
alt Testo alternativo che descrive la zona mappata

Scrivere la mappatura

Per scrivere la specifica della mappaturaè necessario quindi:

  1. Trovare le coordinate delle zone da mappare.
  2. Scrivere la specifica della mappatura al fondo del documento, alla fine del body, e usare una label per far riferimento alla mappatura.
  3. Cancellare il codice inserito solo per trovare le coordinate.

Di seguito un esempio di documento con un'image map.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<titleDocumento con un'image map</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	</head>
	<body>
	
	
	 <!-- 
	 La parte compresa in questo commento è da usare solo per trovare le coordinate
		<a href="#"><IMG src="immagine" alt="testoalternativo&"ismap></A>
	 -->
		<img src="pathname" alt="testoalternativo" usemap="#nomemappa">
		<map name="nomemappa">
			<area shape="circle" coords="15,25,12"
               href="http://www.baravalle.it" alt="baravalle.it">
		    <area shape="rect" coords="15,25,35,45"
               href="http://www.baravalle.it" alt="baravalle.it">
			<area shape="poly" coords="15,25,35,45,25,68"
               href="http://www.baravalle.it" alt="baravalle.it">
			<area shape="default" coords="15,25,35,45"
               href="http://www.baravalle.it" alt="baravalle.it">
		</map>
	</body>
</html>
Vedi un esempio.

Server side image map

Per server side image map si intendono immagini cliccabili eseguite dal lato server.

Quando l'utente clicca su un'area dell'immagine le coordinate del punto vengono inviate al server che, analizzando un apposito file .map, rileva il link associato e reindirizza il browser.

Il file .map ha la seguente forma:

shape URL coordinate


Es:

base referer
poly map "Could I have a menu, please?" 0,0 0,10 10,10 10,0
rect .. 0,0 77,27 "the directory of the referer"
circle http://www.inetnebr.com/lincoln/feedback/ 195,0 305,27
rect another_file "in same directory as referer" 306,0 419,27
point http://www.zyzzyva.com/ 100,100
point http://www.tripod.com/ 200,200
rect mailto:nate@tripod.com 100,150 200,0 "Bugs?"

Nel codice HTML locale sarà invece presente un'immagine, caricata con attributo ismap, che funge da link verso il file .map:

<A href="pathname image map (.map)">
<IMG src="pathname" [...] ISMAP>
</A>

Per utilizzare le image map dal lato server è necessario però avere sul server un CGI o un apposito modulo in grado di interpretarle.

Vedi esempio.

Accesso utente