Il Manuale di HTML di Gabriele Gigliotti

lezione 9: immagini sensibili - parte II

Nella prima parte di questa lezione hai appreso che il tag <AREA> ammette l'attributo shape con il quale si comunica al browser come dovranno essere interpretati i valori che vengono stabiliti per il successivo attributo coord...
...ti sei perso?
Niente paura, passo subito all'illuminante esempio pratico :-)
Nella prima parte per introdurre l'uso delle mappe sensibili abbiamo usato la seguente immagine

Bene, ma se avessi avuto un immagine di questo tipo?

Esiste un metodo più opportuno per sensibilizzare correttamente queste aree.
Introduciamo un altro valore per l'attributo shape.
Per il cerchio in alto a destra avrò
<AREA shape="circle" coords="58,62,60" href="scambiamo.html">
La sintassi appena utilizzata ti è ormai nota (se hai già studiato la prima parte di questa lezione, perchè tu lo hai fatto, vero?) ma volendo guardare con attenzione noteremo due piccole novità.
La prima l'ho già anticipata, è cambiato il valore assegnato all'attributo shape. Nell'esempio precedente abbiamo usato l'ormai familiare rect, ora ci siamo avvalsi di un altro valore che meglio soddisfa le nostre esigenze per questo tipo di immagine.
Noterai inoltre, e questa è la seconda novità, che ci sono solo tre numeri (58,62,60) anzichè i quattro che eravamo abituati a vedere prima. Bene, anche questo ha un senso!
Le prima due cifre stanno ad indicare le coordinate del centro del cerchio, la terza indica invece la lunghezza del raggio espressa in pixel.
Mi spiego meglio

Una volta a conmoscenza di queste informazioni, il vostro browser è in grado di individuare con esattezza l'area sensibile alla quale è associato l'indirizzo relativo o assoluto cui volete far puntare l'immagine.
Procedendo in modo analogo delimito l'area sensibile per l'altro cerchio
<AREA shape="circle" coords="141,152,60" href="scambiamo.html">
Supponendo che l'immagine si chiami scambio.gif mostro di seguito la porzione di codice che sensibilizza l'immagine nonchè il risultato finale (fate pure una prova cliccando ora sull'uno ora sull'altro cerchio)

Sin qui hai appreso come creare una mappa sensibile partendo da un'immagine tutto sommato molto semplice (di forma rettangolare o circolare) può darsi che le tue esigenze siano più complesse. Ad esempio immagina di voler inserire all'interno del tuo sito una mappa sensibile dell'Italia in modo da poter raggiungere una diversa pagina per ciascuna regione a seconda del punto in cui si clicca.
Partiamo dall'immagine dell'Italia.

Inizio a sensibilizzare la Sardegna, la cui forma non assomiglia a quella di un rettangolo o a quella di un cerchio. Per fortuna c'è un terzo tipo di valore che l'attributo shape è in grado di gestire, si tratta di poly.
In sostanza possiamo definire gli estremi di un'area poligonale che abbia la forma della Sardegna, ciò avviene specificando coppie di coordinate che identificano i punti che verranno uniti per delimitare il perimetro dell'area sensibile. Sembra complicato, ma non lasciatevi ingannare, ci sono riuscito io, ci può riuscire chiunque!

Bene, partendo dalla coppia di coordinate scritte in nero (scelta a caso, avrei potuto scegliere una qualunque altra coppia di coordinate) mi muovo in senso orario (scelto a caso, avrei potuto muovermi anche in senso antiorario) e scrivo:
<AREA shape="poly" coords="38,124 , 49,136 , 40,175 , 17,178 , 18,130 , 26,133, 38,124">
Dando queste istruzioni, il browser sarà in grado di definire il perimetro del poligono che racchiude la Sardegna
Nota bene, se la figura non è chiusa da coordinate identiche alle prime il browser, leggendo il codice capirà comunque di dover collegare le prime alle ultime così da delimitare per intero il perimetro dell'area da sensibilizzare.
Immagino che questa lezione sia stata un pò pesante, per ringraziarti per la tua pazienza, ho pensato di rendere disponibile la sensibilizzazione della mappa dell'Italia (scarica il file mappa.zip - 7,17 Kb - che contiene l'immagine dell'Italia che stai vedendo mappa.gif, un file di testo, mappa.txt, con il codice relativo alla sensibilizzazione della mappa, una semplice pagina html, che, immagino avrai intuito, ho chiamato mappa.html, dando segno di spiccata fantasia, in cui è inserita l'immagine opportunamente sensibilizzata!)
Qui di seguito puoi apprezzare il risultato.

N.B. Chiaramente all'interno del file mappa.zip non ho inserito le pagine html delle varie regioni!

lezione 9 (prima parte)

indice

lezione 10

La prossima lezione verterà sulle form, cosa sono e come si implementano all'interno di una pagina web! Alla prossima e grazie per avermi seguito fin qui.