intro | lezioni | articoli | dizionario | download | e-mail |
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: 
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!
|
|
