Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Immagine di sfondo in una Textarea

Link copiato negli appunti

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.


Ti consigliamo anche