generare dinamicamente un testo di Eliana Argenti e Tommaso Bientinesi

IL CLICK DEL MOUSE SU UNA MAPPA GENERA UN TESTO DI SPIEGAZIONE IN UNA ZONA DELLO SCHERMO

Facciamo subito un semplice esempio partendo dalla stessa immagine che abbiamo presentato per spiegare le mappe d'immagine.
Abbiamo sei quadratini che corrispondono ad altrettanti angoli. La linea orizzontale rappresenta la superficie di separazione di due mezzi, la linea verticale la normale alla superficie. Cliccando su uno dei quadratini, invece di aprire una nuova pagina, avremo un messaggio nell'area di testo del form sottostante.

PROVA SUBITO!

Per ottenere questo risultato, occorre memorizzare le frasi che si vogliono far comparire nel form usando un codice simile al seguente:

<script language=Javascript type="text/javascript">
  dati= new Array
  dati[1]="hai dato la risposta giusta"
  dati[2]="riprova, sarai più fortunato"
  dati[3]="prova di nuovo!"
  dati[4]="possibile sbagliare in una domanda così semplice?"
  dati[5]="non so più che scrivere!"
  dati[6]="forse la prossima sarà la volta giusta!"
function mostra(scelta) {
  document.testo.info.value=dati[scelta]
}
</script>

All'interno del codice JavaScript deve essere dichiarata una variabile strutturata (cioè che a sua volta contiene più dati) di tipo array. Noi abbiamo chiamato tale variabile dati. A questo punto, si inseriscono i vari messaggi che si vogliono far comparire: ad esempio dati[1]="hai dato la risposta giusta" significa che il primo elemento della nostra variabile contiene la frase che abbiamo scritto fra virgolette.

Una volta inseriti tutti i messaggi, si introduce la funzione:

function mostra(scelta) {
  document.testo.info.value=dati[scelta]
}

La funzione indica semplicemente che occorre scrivere all'interno del form, che ha nome "testo", nell'area di testo che ha nome "info", il messaggio opportuno.La parola riservata document rappresenta la pagina corrente.
Per chiarire meglio il concetto, riportiamo qui il codice relativo all'introduzione del form:


<form name="testo">
<TEXTAREA name="info" rows=5  cols=30 readOnly>
Clicca sull'immagine per ricevere un messaggio si spiegazione!
</TEXTAREA>
</form>

Ora non resta che sistemare il codice da inserire nelle varie aree della mappa:


<area shape="RECT"   coords="165,188,178,201"
                                href="javascript:mostra(4)">

Come si vede, invece di chiamare il collegamento ad una pagina, href chiama la funzione javascript mostra seguita, tra parentesi, dal numero del messaggio che vogliamo far comparire.

NOTA BENE Ricorda Che basta un piccolo errore ortografico e JavaScript non funziona più!
Non dimenticare poi di scaricare un programma in Visual Basic che si trova nella sezione utilità di questo sito e che permette di inserire il codice per le mappe in modo semplice e veloce.