lezione 9: immagini sensibili - parte I il Manuale di HTML a cura di Gabriele Gigliotti
 
intro | lezioni | articoli | dizionario | download | e-mail |
 
 
 
  Lezione 9: immagini sensibili - parte I
     Offriamo ai nostri visitatori un utile strumento per facilitare i loro spostamenti sul nostro sito: le mappe sensibili, o mappe di immagini.
     Non lasciarti intimorire dal nome, una mappa sensibile non è altro che un'immagine, nella lezione 5 abbiamo imparato ad implementare una immagine all'interno di una pagina e abbiamo anche visto come sia possibile adoperarla come un link. Bene, la mappa sensibile è una immagine che contiene al suo interno più collegamenti (link, appunto) , e così a seconda del punto in cui si clicca viene attivato un diverso link, divertente vero?
     Tutto quello che ti chiedo prima di arrivare all'esempio pratico e di tenere duro e sorbirti pure la parte introduttiva, mi rendo conto che può essere un pò pesante, ma, credimi, queste poche righe ti aiuteranno a comprendere meglio come funziona una mappa sensibile, oltre a farti capire meglio l'esempio sotto esposto, per cui se te cala la palpebra... fai un piccolo sforzo è intona il canto propiziatorio del bravo webmaster:
Per il mio sito e per i miei visitatori!

     Ora, sei pronto!
     Esistono due tipi di mappe sensibili, quelle dette dal lato server e quelle dette dal lato client. Vediamo cosa significa mappa d'immagine dal lato server, in questo caso, le informazioni sulle aree sensibili si trovano sul web server (il computer che ospita le pagine che sto visitando) il quale controlla in quale delle aree sensibili specificate ricadono le coordiante del punto su cui ho cliccato, restituendo al browser l'indirizzo al quale andare.
     Insomma, un mio clic su un certo punto di una mappa segna l'inizio di una conversazione tra il server, su cui si trovano queste informazioni, e il mio browser (Internet Explorer, Netscape Navigator, Opera, o qualunque altro software di navigazione stia adoperando) al termine di questo scambio di informazioni il mio browser ottiene l'indirizzo (URL) da raggiungere. Questo botta e risposta richede del tempo per essere effettuato (e sai bene che non è cosa saggia abusare della pazienza dei navigatori, già messa a dura prova dal sovraffollamento della rete e da altri piccoli e grandi intoppi).
     Le mappe d'immagine dal lato client hanno il pregio di garantire una interazione più veloce, perchè le informazioni che definiscono le aree sensibili si trovano direttamente sulla pagina web che si sta visualizzando, per cui la conversazione non ha più luogo tra il server (che si trova chissà dove e per raggiungere il quale bisogna aspettare troppo tempo) e il nostro browser, ma diventa un dialogo tra il browser e il... browser stesso :-) quindi si riesce ad ottenere prima le informazioni sull'indirizzo da raggiungere.
     È proprio delle mappe d'immagini dal lato client che parliamo introducendo subito il discorso con un esempio pratico.
Prendo la seguente immagine: racconti

     Voglio che questa immagine punti a tre diverse pagine, in ognuna delle quali è inserito un diverso racconto. Procediamo con ordine. La prima cosa da fare è inserire l'immagine nella pagina nel modo che già conosciamo.

<IMG src="racconti.gif" border=0 usemap="#indiceRacconti">

non vi sarete lasciati sfuggire la novità: l'attributo usemap del tag <IMG>:
Con questo attributo comunichiamo al browser il nome che vogliamo attribuire all'immagine in quanto mappa sensibile, ricorda di inserire sempre il simbolo di cancelletto # prima del nome che si attribuisce alla mappa sensibile.
     Ti sei chiesto perchè c'è questo simbolo? Se hai seguito la lezione 6, hai appreso che è possibile creare un collegamento che punti ad una diverso punto di una stessa pagina.
     Bene, in modo analogo quel simbolo di cancelletto dopo l'attributo usemap sta ad indicare che all'interno del documento è presente un'immagine contrassegnata con quel nome che assegnamo a tale attributo e che contiene le informazioni sulle aree sensibili della mappa.
     Procediamo nella costruzione della nostra mappa con l'inserimento di una nuova coppia di tag: <MAP> </MAP>

<MAP name="indiceRacconti">
<AREA shape="rect" href="racconto1.htm" coords="0,0 , 157,57">

     Comunichiamo al browser qual'è l'area dell'immagine sulla quale è possibile cliccare per puntare alla pagina racconto1.htm. La forma (shape) di quest'area è rettangolare (rect). Quest'area rettangolare viene determinata con precisione specificando le coordinate del vertice che si trova in alto a sinistra e quello che si trova in basso a destra.

     Nota: se vi state chiedendo come ho fatto per ottenere queste coordinate, sappiate che ho usato il Paint Shop Pro (una specie di fratello povero di Adobe Photoshop) il file al quale puntare una volta attivato questo link è racconto1.htm
      In modo analogo fisso le coordinate delle altre due aree, per ottenere dei link ad altre due pagine con altri due racconti.
<AREA shape="rect" href="racconto2.htm" coords="0,0 , 157,106">
<AREA shape="rect" href="racconto3.htm" coords="0,0 , 157,157">
</MAP>

     Il risultato che ottengo è questo:

     Noterete che cliccando in corrispondenza della scritta racconto 1 raggiungerete la pagina con il racconto 1 (guarda un pò che fantasia), stesso discorso per il racconto 2 e 3.
     Ricordo che l'attributo border del tag <IMG> è necessario per evitare di visualizzare un bordo (in genere blu) attorno all'immagine impiegata come collegamento ipertestuale.
     Bene, abbiamo creato un'unica immagine che punta a tre diverse pagine a seconda del punto in cui si clicca...
...c'è ancora qualcosa da sapere sulle mappe sensibili, lo vedremo insieme nei prossimi giorni!

lezione 8     indice    lezione 9 (II parte) 
 
Questa lezione prosegue con lo studio delle mappe sensibili. Scopriremo altri valori che l'attributo shape accoglie e ci sarà un regalo per te!
 

© Gabriele Gigliotti 1998 1999