.:° JsDir °:. JavaScript .:° Gli script del webmaster e dei collaboratori al sito °:. Bring Your Site To Life®

      Può capitare di realizzare un sito per un'azienda o anche a titolo personale, e dover proporre al visitatore una mappa (dell'Italia, dell'Europa, etc.) dalla quale scegliere una regione o uno stato per i più svariati motivi.
      Una bella soluzione grafica puo' essere quella di realizzare un rollover sulle aree che evidenzino l'area in cui è posizionato il mouse. Può sembrare un'impresa, invece è una cosa molto semplice a farsi, quasi banale direi. In questa scheda vediamo come realizzare l'effetto e come dargli una marcia in più: rendere attiva, come immagine di default, la regione in cui ha cliccato l'utente.
      Non avendo disponibile una mappa come esempio, ho usato l'immagine visibile a lato fatta di proposito per la scheda, rendendola anche più complicata di una situazione reale: notate infatti le arree delle stelle arancio e verde che "spuntano" da sotto le altre. Naturalmente anche questi pezzetti sono stati resi attivi nella mappa,
      Alla base dello script c'è naturalmente la mappa di partenza, che nel nostro caso è la stessa qui a lato, ma in scala di grigi e naturalmente un'immagine per ogni area colorata:

La prima è naturalmente l'immagine base, le successive (nello stesso ordine dell'array che vedremo fra un po') sono le singole regioni.

Nelle singole pagine web dovremo solamente includere lo script, l'immagine da mappare e la relativa mappa:

<html>
<head>
   <script src="MapRoller.js"></script>
</head>
<body>
. . .
. . . 
. . . 

<img name="RollerMap" src="images/stars_base.gif" width="300" height="300" border="0" usemap="#MappaRoller">

<map name="MappaRoller">
   . . .
   . . .
   <area shape="poly" coords=" . . ." href="giallo.html" onmouseover="RollOn(3)" onmouseout="RollOut()">
   <area shape="poly" coords=" . . ." href="rosso.html" onmouseover="RollOn(4)" onmouseout="RollOut()">
   . . .
   . . .
</map>

</body>
</html>

per ogni area specificheremo ovviamente il link (evidenziato in viola), e naturalmente i classici onmouseover e onmouseout che attivano le funzioni.
Vediamo lo script "base", quello cioè che effettua solo il rollover:

var MapNomi = new Array ("arancio","blu","ciano","giallo","rosso","verde","viola")
var MapSources = new Array ();
for (conta in MapNomi)
   {
   MapSources[conta] = new Image();
   MapSources[conta].src = "images/stars_"+MapNomi[conta]+".gif";
   }
var MapDefault = new Image(); MapDefault.src="images/stars_base.gif";
		
function RollOn(ImgNum)
   {
   document.RollerMap.src=MapSources[ImgNum].src;
   }

function RollOut()
   {
   document.RollerMap.src=MapDefault.src;
   }

      come si vede è praticamente identico allo script per il RollOver Singolo.
      Non serve nient'altro infatti, la mappa definita su un'immagine in pratica continua perfettamente a funzionare anche se l'immagine cambia, perché di fatto non è definita sull'immagine in quanto file bitmap, bensì semplicemente sul tag IMG.
      Non c'è dunque alcuna necessità di usare livelli e swapparli complicando inutilmente il codice come ho visto fare altrove e come di primo acchito avevo pensato anch'io.

      L'unica cosa cui fare attenzione è indicare come argomenti della chiamata alla funzione RollOn() il giusto numero dell'immagine come indice nell'array MapNomi. Guardando la galleria sopra e tralasciando l'icona tutta grigia, nell'area verde vediamo che la stella gialla è la quarta della riga, che nell'array corrisponde al numero 3 dato che il conteggio comincia da zero.
      Nient'altro è necessario per realizzare quest'effetto in versione base

      Ma naturalmente vogliamo fare di più: quando l'utente clicca su una regione vogliamo tenere evidenziata la regione cliccata come default, quindi swappare fra l'immagine in cui è posizionato il mouse e l'immagine corrispondente alla pagina caricata.
      Per ottenere questa funzionalità abbiamo bisogno di una microscopica modifica nelle pagine e di poche altre righe nello script.
      Nelle varie pagine dovremo aggiungere, oltre allo script incluso, anche un'altra riga di JavaScript che sarà semplicemente una variabile il cui valore è l'indice dell'array corrispondente alla tale pagina.
      Nel caso della pagina "giallo.html" corrispondente ovviamente alla stella gialla il sorgente cambierà solamente per l'aggiunta delle righe evidenziate in verde nel codice che segue:

<html>
<head>
   <script src="MapRoller.js"></script>
<script type="text/javascript">
<!--
var ImgDefault=3;
//-->
</script>
</head>
<body>
. . .
. . . 
. . . 

<img name="RollerMap" src="images/stars_base.gif" width="300" height="300" border="0" usemap="#MappaRoller">

<map name="MappaRoller">
   . . .
   . . .
   <area shape="poly" coords=" . . ." href="giallo.html" onmouseover="RollOn(3)" onmouseout="RollOut()">
   <area shape="poly" coords=" . . ." href="rosso.html" onmouseover="RollOn(4)" onmouseout="RollOut()">
   . . .
   . . .
</map>

</body>
</html>

semplicemente una variabile: ImgDefault, che naturalmente potrete definire anche in qualsiasi altro script in-line presente nella pagina.
Anche lo script cambia poco; le modifiche sono in verde e le vediamo subito:

var MapNomi = new Array ("arancio","blu","ciano","giallo","rosso","verde","viola")
var MapSources = new Array ();
for (conta in MapNomi)
   {
   MapSources[conta] = new Image();
   MapSources[conta].src = "images/stars_"+MapNomi[conta]+".gif";
   }
var MapDefault = new Image(); MapDefault.src="images/stars_base.gif";
var BaseMap = new Image(); BaseMap.src="stars_base.gif";

var MapDefaultTimer;
		
function RollOn(ImgNum)
   {
   document.RollerMap.src=MapSources[ImgNum].src;
   clearTimeout(MapDefaultTimer);
   }

function RollOut()
   {
   clearTimeout(MapDefaultTimer);
   document.RollerMap.src=MapDefault.src;
   MapDefaultTimer=setTimeout("document.RollerMap.src=BaseMap.src;",200);
   }
	
onload=SetDefaults;

function SetDefaults()
   {
   if (ImgDefault!=-1)
      {
      BaseMap.src=MapSources[ImgDefault].src;
      document.RollerMap.src=MapSources[ImgDefault].src;
      }
   }

      Abbiamo aggiunto (prima riga verde) un'altra variabile/immagine che inizialmente carica la stessa immagine di default (quella a scala di grigi) ed una variabile che useremo per un timeout.
      Alla fine vediamo un event-handler (onload) che esegue la funzione SetDefaults() al caricamento della pagina.
      Questa funzione usa la variabile ImgDefault che abbiamo aggiunto nella pagina web e fa due operazioni:
      - cambia il src dell'immagine BaseMap appena aggiunta;
      - camba il src dell'immagine mappa nel documento.

      Quell'if() iniziale è presto spiegato: nella pagina principale (la index nell'esempio) e comunque in tutte le pagine che non corrispondono a nessuna regione non abbiamo da caricare un'immagine di default diversa. Dunque inseriremo comunque la variabile ImgDefault ma le assegneremo valore -1. In questo modo i rollover ed i timers, che vediamo subito, funzioneranno regolarmente ed in particolare la RollOut() visualizzerà sempre e comunque l'immagine in scala di grigi.
      Fate molta attenzione a non dimenticare questa variabile in qualsiasi pagina inserirete la mappa con lo script: se la funzione SetDefaults() non trova la variabile ImgDefault genererà un errore JavaScript.

      Fin qui non succede nient'altro, ora entrano in gioco le modifiche fatte alle due funzioni protagoniste: RollOn() e RolOut().
      Ho notato mentre scrivevo lo script che sostituire all'immagine di default (grigia) quella attiva causava un antipatico sfarfallio di colori mentre il mouse si muoveva, il timer serve in pratica per fare una cosa molto semplice: quando il mouse si sposta sulla mappa, l'immagine che viene caricata al mouseover è ancora quella tutta grigia, solo quando il mouse esce definitivamente viene ripristinata l'immagine di default della pagina, cioè quella gialla nel nostro esempio.
      Ecco dunque l'utilitià del timer: quando viene eseguita la RollOut all'immagine viene sostituita quella grigia, e subito dopo viene laciato un setTimeout() che se non viene interrotto (prima riga delle due funzioni) dopo 200 millisecondi ripristina come default quella relativa alla pagina.
      Il funzionamento è molto più fluido in questo modo, per vedere come sarebbe stato altrimenti eliminate le istruzioni relativa al timeOut dalle due funzioni e nella RollOut() invece di MapDefault.src mettete BaseMap.src.

      Questo è tutto, nel file ZIP che scaricate viene usata negli esempi quest'ultima versione, ma se non volete questa funzionalità basterà usare lo script "base_MapRoller.js" come script incluso nelle vostre pagine.

      Prima di lasciarvi un suggerimento: l'effetto visivo generato dallo script sarà tanto migliore quanto più precisi saranno i contorni della mappa.
      Naturalmente non ci ho perso tempo più di tanto per quest'esempio, ma noterete che se passate con il mouse sui pezzettini verde e arancio il rollover avviene ugualmente a tutto vantaggio per il visitatore.
      In pratica se mappate un'immagine dell'Italia cercate di seguire quanto più fedelmente possibile i contorni delle regioni, includendo (se sono visibili) anche le isole come Elba e Pantelleria che collegherete allo script come io ho fatto per le aree verdi: cioè con delle aree separate ma che puntano allo stesso indice dell'array.

	Parli JavaScript? Non tenerlo per te! JsDir cerca collaboratori. Se gli UserScript ti stanno stretti e vuoi inserire delle FAQ, dei Tips&Tricks, o anche uno StaffScript, se vuoi scrivere un tutorial o recensire un libro... insomma se parli JavaScript segui questo link. È un'occasione per farti conoscere e dimostrare le tue capacità!!!