Writing HTML | Riguardo A | FAQ | Riferimenti | Tag | Lezioni | indietro | avanti |

23. Mappe ad Immagini

Obiettivi

• Capire la differenza tra i processi lato server e lato client
• Creare un'immagine inlinea con diverse sezioni che fanno da link ad altre web page, figure, od altri siti in Rete

Lezione

Nella lezione 7a abbiamo imparato come scrivere il codice per mettere un'immagine inlinea nella nostra pagina e nella lezione 8e abbiamo visto come potevamo farla funzionare da link. Sin dai primi giorni di vita del web, c'e' stato un modo per creare link in diverse parti di una figura -- nota come "clickable image map".

Ma fino a poco tempo fa, le mappe ad immagini richiedevano che alcune cose fossero processate dal web server. Questo e' il modo con cui funzionavano:

1. I visitatori guardano la pagina con la mappa e fanno click sulla parte in basso a destra.
2. Il web browser fa, "Hey! mi hanno fatto click su quest'immagine! Devo mandare un messaggio al server che qualcuno ha premuto a queste coordinate di questa immagine."
3. Il server fa, "Hmmm, qui ho queste coordinate per quest'immagine - il file che e' stato chiamato dice di controllare le coordinate in questo file... Okay, dice il file, se le coordinate sono in questo rettangolo, allora manda il navigatore a questo URL" Allora il server gira queste informazioni al browser.
4. Il web browser fa, "Okay! Il server dice di andare a questo URL - Partenza!"

Spyglass fu il primo browser a poter maneggiare i calcoli ed a poter trasmettere l'esatto URL, in base alle coordinate che erano state create all'interno del codice di una pagina. Questo e' un processo lato-client. L'intero dialogo descritto poco sopra ha ora luogo tra il browser e se stesso! Per ulteriori informazioni su queste mappe, vai alla Imagemap Help Page (IHiP).

Il codice per una mappa lato-client e':

  <img src="image.gif" usemap="#map_name">

  <map name="map_name">
  <area shape="rect" coords="x1,y1,x2,y2" HREF=URL1>
  <area shape="rect" coords="x1,y1,x2,y2" HREF=URL2>
         :
         :
   </map>

NOTA: Per identificare le coordinate per le regioni "calde" dovrai usare un tipo di programma grafico. La pagina Image Map Help o Yahoo elencano programmi per rendere semplici le cose. Per questa lezione saremo noi a fornirti le esatte coordinate.

In questa lezione andiamo ad aggiungere alla nostra pagina Glossario una figura con diversi tipi di eruzione vulcanica. Ciascun tipo sara' collegato ad un web site esterno. In piu' creeremo altri due link ai nostri file locali.

1. Primo, avrai bisogno di scaricare una copia dell'immagine che stiamo usando dal Centro Per Il Download delle Immagini Lezione 23

   Salva questo file come volc.jpg ed assicurati di conservarlo nella folder/subdirectory pictures.

2. Apri il file term.html nel tuo text editor.

3. Sotto l'ultimo paragrafo ("...un vulcano storicamente attivo nell'isola della Martinique. <p>"), aggiungi questo HTML:

   
   Ci sono diversi tipi di formazioni e di eruzioni vulcaniche. Possono essere classificati in base al 
   <A HREF="explode.html">grado di esplosivita'</A> 
   ed all'<A HREF="height.html">altezza</A> della colonna eruttiva:
   <p>
   <center>
   <font size=+2>
   Indagate su ogni tipo di vulcano premendo sulle immagini
   </font><br>
   <img src="../pictures/volc.jpg" usemap="#volcmap" border=0>
   <p>
   </center>
   

   NOTA: abbiamo inserito un'immagine che si riferirý ad una serie di coordinate, associate col nome "volcmap". Il tag <center>...</center> allinea l'immagine al centro della pagina (vedi lezione 20). L'attributo border=0 dentro il tag<img> sopprime il bordo.

   Abbiamo anche preparato i link per i 2 nuovi documenti che creeremo piu' tardi.

4. Poi aggiungeremo il codice per le coordinate della mappa. Puo' essere messo in qualsiasi punto nel documento HTML, perche' e' codice che non viene visualizzato dal web browser. Ti suggeriamo di aggiungerlo semplicemente al codice del passo precedente:

   <map name="volcmap">
   <area shape="rect"
    href="http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html" 
      coords="48,46,204,153">
   <area shape="rect" href="explode.html" 
      coords="0,66,26,227">
   <area shape="rect" href="height.html" 
      coords="95,283,378,309">
   <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/"  
      coords="321,154,468,261">
   <area shape="rect" href="http://stromboli.net/" 
      coords="172,155,318,274">
   <area shape="rect" href="http://hvo.wr.usgs.gov/volcanowatch/" 
      coords="36,155,168,276">
   <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/" 
      coords="90,3,343,123">
   </map>

   NOTA: dovresti vedere che 5 delle 7 aree connettono ad un sito esterno. Le altre due sono per documenti locali che andremo a creare tra poco.

5. Salva il tuo file term.html.

6. Ora dobbiamo creare gli altri due file. Crea un nuovo documento nel tuo text editor e mettici:

   
   <html>
   <head>
   <title>Esplosivita'</title>
   </head>
   <BODY BGCOLOR=#000000 TEXT=#EEEEBB 
   LINK=#44DDFF VLINK=#00FF88>
   <H5>Volcano Web / 
   <A HREF="index.html">Indice</A> / 
   <A HREF="term.html">Glossario</A> / 
   </H5>
   
   <h1 align=center>Esplosività</h1>
   L'<b>esplosivita'</b> di un'eruzione vulcanica e' stimata in base alla forza dell'eruzione
   Esperimenti hanno dimostrato che quando l'acqua che viene a contatto con il magma caldo,
   l'eruzione e' molto piu' forte, fenomeno conosciuto come <b>idro-vulcanismo</b>.
   <p>
   
   Per preistoriche eruzioni, l'esplosivita' e' stimata in base al grado
    di frammentazione delle particelle  di origine vulcanica.
   Un'eruzione molto esplosiva mandera' in frantumi la struttura del 
   vulcano molto piu' di un'eruzione meno esplosiva.
   <p>
   <a href="term.html"> 
   <img src="../pictures/left.gif" alt="** " border=0> 
   Ritorna a <i>Volcano Web</i></a>
   
   <HR>
   <ADDRESS>
   <B><A HREF="index.html">Volcano Web</A> : 
   <A HREF="term.html">Glossario</A> : 
   Esplosivita'</B> <p>
   
   creato da Lorrie Lava, 
   <A HREF="mailto:lava@pele.bigu.edu">
   lava@pele.bigu.edu</A><br>
   Volcanic Studies, <A HREF="http://www.bigu.edu/">
   Big University</A><p>
   <TT>ultima modifica: April 1, 1995</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/explode.html</tt>
   <p>
   </body>
   </html>
   

   Salva questo documento nella stessa directory degli altri file e chiamalo explode.html

7. Ora crea un secondo documento vuoto e mettici dentro:

   
   <html>
   <head>
   <title>Altezza della Colonna Eruttiva</title>
   </head>
   
   <BODY BGCOLOR=#000000 TEXT=#EEEEBB 
   LINK=#44DDFF VLINK=#00FF88>
   <H5>Volcano Web / 
   <A HREF="index.html">Indice</A> / 
   <A HREF="term.html">Glossario</A> / 
   </H5>
   
   <h1 align=center>Altezza della Colonna Eruttiva</h1>
   L'<b>altezza</b>della vampata di eruzione del vulcano 
   (in km) e' presa dalla diretta osservazione
   o dalle stime basate su prove storiche.
   <p>
   Per eruzioni preistoriche, questa scala e' calcolata in base alla 
   <b>dispersione</b> dei prodotti vulcanici, per esempio 
   quanto lontano sono finiti, di quanto si sono spostati.
   Le eruzioni vulcaniche che hanno colonne molto alte, spargeranno 
   lontano i loro lapilli.
   <a href="term.html"> 
   <img src="../pictures/left.gif" alt="** " border=0> 
   Ritorna a  <i>Volcano Web</i></a>
   
   <HR>
   <ADDRESS>
   <B><A HREF="index.html">Volcano Web</A> : 
   <A HREF="term.html">Glossario</A> : 
   Altezza della Colonna Eruttiva</B> <p>
   
   creato da Lorrie Lava, 
   <A HREF="mailto:lava@pele.bigu.edu">
   lava@pele.bigu.edu</A><br>
   Volcanic Studies, 
   <A HREF="http://www.bigu.edu/">
   Big University</A><p>
   <TT>ultima modifica: April 1, 1995</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/height.html</tt>
   <p>
   </body>
   </html>
   

   Salva questo documento nella stessa directory degli altri tuoi file HTML e chiamalo height.html

8. Ora apri il tuo file term.html nel tuo web browser. L'immagine dovrebbe apparire e mentre muovi il mouse sopra le diverse parti, il cursore dovrebbe trasfomarsi in una "manina" e in fondo alla finestra ci dovrebbe essere un indicatore dell'URL a cui si riferisce la regione attiva.

Coprire le Tue Basi

E dopo tutto, e' meglio usare le mappe lato-client perche' evitano uno scambio extra attraverso la Rete.

Nel nostro caso possiamo costruire una pagina speciale che riporti un messaggio per i web browser che non supportano le mappe lato-client:

1. Per prima cosa dobbiamo creare un nuovo file HTML chiamato nomap.html. Apri un file nel text editor e inserisci:

   
   <html>
   <head>
   <title>Nessuna Mappa Disponibile</title>
   </head>
   <BODY BGCOLOR = #000000 TEXT=#EEEEBB 
   LINK=#44DDFF VLINK=#00FF88>
   <H5>Volcano Web / 
   <A HREF="index.html">Indice</A> / 
   <A HREF="term.html">Glossario</A> / 
   </H5>
   
   <h1 align=center>Spiacenti!</h1>
   Sembra che il tuo browser non supporti le mappe lato-client. 
   Puoi ottenere le stesse informazioni seguendo questi link:
   <ul>
   <li><A HREF="explode.html">Esplosivita'</A>
   <li><A HREF="height.html">Altezza delle Colonne Eruttive</A>
   <p>
   <li><A HREF="http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html">Surtsiani</A>
   <li><A HREF="http://www.geo.mtu.edu/volcanoes/santamaria/">Phreato-Pliniani</A>
   <li><A HREF="http://hvo.wr.usgs.gov/volcanowatch/">Hawaiiani</A>
   <li><A HREF="http://stromboli.net/">Stromboliani</A>
   <li><A HREF="http://www.geo.mtu.edu/volcanoes/pinatubo/">Pliniani</A>
   </ul>
   <p>
   <a href="term.html"> 
   <img src="../pictures/left.gif" alt="** " border=0> 
   Ritorna a <i>Volcano Web</i></a>
   
   <HR>
   <ADDRESS>
   <B><A HREF="index.html">Volcano Web</A> : 
   <A HREF="term.html">Glossario</A> : 
   Nessuna Immagine Disponibile</B> <p>
   
   creato da Lorrie Lava, 
   <A HREF="mailto:lava@pele.bigu.edu">
   lava@pele.bigu.edu</A><br>
   Volcanic Studies, 
   <A HREF="http://www.bigu.edu/">Big University</A><p>
   <TT>ultima modifica: April 1, 1995</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/nomap.html</tt>
   <p>
   </body>
   </html>

   Salva questo file come nomap.html

   NOTA: osserva come offriamo al visitatore accesso alle stesse informazioni disponibili attraverso la mappa ad immagini. Una web page non limita l'accesso ai propri contenuti solo perche' si sta usando un web browser diverso.

2. Ora apri term.html nel tuo text editor.

3. Trova la riga:

     <img src="../pictures/volc.jpg" usemap="#volcmap" border=0>

   e sostituiscila con:

     <a href="nomap.html">
     <img src="../pictures/volc.jpg" usemap="#volcmap" border=0>
     </a>

   NOTA: dovresti essere in grado di riconoscere questo codice: se il web browser comprende le mappe lato-client, applica l'HTML; altrimenti, l'intera immagine collega alla pagina nomap.html.

4. Salva questo file e quindi Aggiorna nel tuo web browser.

Controlla il Tuo Lavoro

Verifica

1. Qual e' la differenza tra mappe lato-server e quelle lato-client?
2. Cosa fa il tag <map>...</map>?
3. Come puoi comportarti nel caso in cui un browser non supporti le mappe lato-client?

Informazioni Aggiuntive

Pratica Indipendente

Prossimamente....

VAI A.... | Indice Delle Lezioni | indietro: "Ancora su Immagini e Liste" | avanti: "META tag" |