Lo script che presentiamo, grazie all'utilizzo di javascript e fogli di stile, permette di impostare un'immagine in rollover come sfondo di una textarea. Ogni volta che il puntatore passerà sopra l'elemento del form cambierà contestualmente l'immagine di background e il colore del testo.
Il codice è compatibile con i Explorer 5.x e Netscape 6.x.
L'esempio si compone di 1 file:
- esempio.htm
- 01.gif
- 02.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Il codice è molto semplice e non richiede grandi modifiche. Prima di tutto impostiamo i CSS necessari tra i tag <head> della pagina:
<style type="text/css">
.immagine1{
background-color:f0f0f0;
background-image:url(01.gif);
background-repeat: no-repeat;
background-position: 50% 50%;
color:333333;
}
.immagine2{
background-color:006699;
background-image:url(02.gif);no-repeat center fixed;
background-repeat: no-repeat;
background-position: 50% 50%;
color:ffffff;
}
</style>
"immagine1" ed "immagine2" sono le due classi dei CSS che permettono di impostare le immagini di sfondo per la textarea.
Per ognuna delle due classi dovremo personalizzare i seguenti parametri:
background-color:f0f0f0;
il colore di sfondo della textarea
background-image:url(01.gif);
il percorso che porta alla prima immagine di sfondo (potrà essere gif o jpg)
background-repeat: no-repeat;
background-position: 50% 50%;
questi due parametri permettono di centrare l'immagine nella textarea. modificando i valori "50%" e "50%" sposteremo le coordinate della gif
color:333333;
il colore del testo
Una volta preparati i fogli di stile, dovremo assegnare le classi alla textarea. Prepariamo un semplice form di questo tipo:
<form name="prova" method="post" action="">
<textarea rows="18" cols="74"> </textarea>
</form>
Inseriamo questa riga nel tag <textarea....>:
class="immagine1" onmouseover="this.classname='immagine2'" onmouseout="this.classname='immagine1'"
Ed ecco il risultato:
<form name="prova" method="post" action="">
<textarea rows="18" cols="74" class="immagine1"
onMouseOver="this.className='immagine2'" onMouseOut="this.className='immagine1'"> </textarea>
</form>
Ovviamente lo stesso effetto può essere applicato anche ai campi input di un form. Il procedimento da seguire è lo stesso:
<input name="campo" type="text" class="immagine2" onMouseOver="this.className='immagine1'" onMouseOut="this.className='immagine2'">
Altre modifiche non sono necessarie.
