Testo che cambia colore


Il testo si può muovere, il testo lampeggia, il testo cambia dimensione...e il colore? Beh, adesso vediamo di fare qualcosina anche con il colore.
Partiamo da un esempio molto semplice: il cambiamento di colore al passaggio del mouse. La cosa è molto semplice da fare e non necessita neanche di script separati, ma può essere fatta sul momento, quando si definisce un oggetto.

Passa qui sopra con il mouse per vedere l'effetto

Il sorgente è molto semplice:
<div id="esempio1" onmouseover="document.all.esempio1.style.color='red'"> Passa qui sopra con il mouse per vedere l'effetto </div>
Come vedete però il nuovo colore resta anche se si porta il cursore del mouse fuori da esso ed essendo un oggetto, non è necessario passare proprio su di esso, ma passare sulla riga che lo contiene. Per eliminare questo secondo problema basta indicare nell'attributo style la larghezza desiderata. Un trucco per farlo è quello di sfruttare la proprietà border per visualizzare il bordo e poi ridimensionarlo in base alla larghezza del testo.

Passa qui sopra con il mouse per vedere l'effetto

Una volta visto che questo bordo è di 380 pixel, cancelliamo il bordo ma manteniamo la larghezza e vediamo che succede nello script precedente, dove si cambiava il colore:

Passa qui sopra con il mouse per vedere l'effetto

Adesso per far cambiare colore al testo bisogna per forza passarci sopra. Adesso facciamolo ritornare del colore del testo, una volta che il mouse è uscito da esso. Ancora una volta è basta aggiungere del codice direttamente nel tag div come segue:

Passa qui sopra con il mouse per vedere l'effetto

Ecco il codice aggiornato:
<div id="esempio4" style="width:380px" onmouseover="document.all.esempio4.style.color='red'" onmouseout="document.all.esempio4.style.color= document.fgColor;"> Passa qui sopra con il mouse per vedere l'effetto </div>
Come avete visto, per riprendere il colore che aveva in precedenza, non si mette direttamente il colore "lime", ma, per rendere lo script usabile su qualsiasi pagina senza cambiare questo valore, si usa il colore impostato nell'attributo text del tag body richiamato tramite document.fgColor.

Adesso lasciamo un po' da parte quello che succede quando si passa sopra al testo e vediamo di fargli fare qualche cambiamento da solo. Per spiegarmi meglio, facciamogli cambiare colore ciclicamente.
Ecco uno script che fa per noi:

Attenzione! Lo script è quello dell'esempio successivo. Comprende anche i bottoni per far partire/fermare lo script, ma non sono necessari!!!


<div id="esempio5">
Io sono il testo che cambia colore
</div>
<form>
<input type="button" value="Via!" onclick="via();">
<input type="button" value="Stop!" onclick="stop();">
</form>
<cript language="javascript">

function ccolore()
{
var oggi = new Date();
var secs = oggi.getSeconds();

if(secs%5==0)
{document.all.esempio5.style.color='red';}

else if(secs%5==1)
{document.all.esempio5.style.color='orange';}

else if(secs%5==2)
{document.all.esempio5.style.color='yellow';}

else if(secs%5==3)
{document.all.esempio5.style.color='green';}

else if(secs%5==4)
{document.all.esempio5.style.color='cyan';}
}

function via()
{
intervallo = setInterval("ccolore()", 1000);

}

function stop()
{
clearInterval(intervallo);
}
</script>
 Per prima cosa si crea un oggetto con nome esempio5 all'interno del tag <div> contenente il testo specificato.
Successivamente si creano i bottoni per far partire e fermare l'animazione (clicca QUI per sapere come si fa a fare funzionare lo script senza usare i bottoni).
Poi si definisce la funzione vera e propria. Come abbbiamo già visto altrove, la prima cosa da fare per questo tipo di animazioni è avere un qualcosa che cambia ad ogni chiamata della funzione, ovvero i secondi, quindi creiamo una variabile che contenga i secondi.

In seguito facciamo una serie di confronti con if e in relazione al valore preso dalla variabile secs associamo al testo un colore.

Adesso creiamo le due funzioni per far partire e fermare l'animazione. Sono molto semplici: la prima imposta un intervallo e la seconda lo toglie. Nulla di più facile!

Come fare a usare lo script senza servirsi dei bottoni:
Intanto togliete il form con i bottoni :-D
Togliete anche le funzioni via() e stop() che a questo punto non servono più.
A questo punto dovete reinserire il metodo che segna l'intervallo tra una chiamata della funzione e l'altro.
Allora basta inserire queste righe di codice dopo la fine di questo script:
<script language="javascript">
setInterval("ccolore()", 1000);
ccolore();
</script>
La chiamata di funzione serve per farla partire, mentre per quanto riguarda il metodo setInterval non ha bisogno di essere associato ad una variabile perché non deve essere fermato, quindi non cè bisogno di un eventuale argomento per il metodo che lo toglie.

Ecco mostrato il risultato delle nostre fatiche:

Io sono il testo che cambia colore

Nota: lo stesso risultato si poteva ottenere definendo delle classi all'interno del tag <style> e usare queste classi all'interno dello script. Infatti al posto di document.all.elemento.style.color="colore" si poteva usare document.all.elemento.className="nome_della_classe"