¿como crear una Caja de texto con imagen de fondo?

[salvador86]

Quisiera hacer el efecto que tiene esta pagina foros del web en la caja de texto que esta en la parte superior de la pagina y al darle clic desaparesca

Alguien me podria ayudar

[JavierB]

Hola salvador86

Prueba este ejemplo:

Código:

<input type="text" style="background:url(imagen.jpg)"
onfocus = "this.style.background=''"
onblur = "if(this.value=='') this.style.background='url(imagen.jpg)'" />

Saludos,

[codigojavascript]

Claro es así de fácil. Si estás pensando en colocar una imagen relativamente chica (más parecida a un icono) deberías utilizar la propiedad background-repeat con su valor no-repeat para que la misma no se repita en todo el cuadro de texto

quedaría así

Código:

<input type="text" style="background:url(imagen.gif); 
background-repeat:no-repeat; " 
onfocus="this.style.background=''" 
onblur = "if(this.value=='') this.style.background='url(imagen.gif)'" />

Saludos
Toda la suerte!!!

[salvador86]

Gracias codigojavasript y Javierb, como estoy utilizando un icono pequeño me sirve me sirve la propiedad background-repeat, pero quise utilizarlo en el onBlur pera que no se repita la imagen pero no pude el codigo q quise utilizar es:

<input type="text" style="background:url(logo02.gif); background-repeat:no-repeat;"
onfocus="this.style.background=''"
onblur = "if(this.value==''){this.style.background='url(log o02.gif)';this.style.background-repeat=no-repeat;}" />

pero no me sale les os ruego una ultima ayuda gracias

[JavierB]

Hola de nuevo.

Para las propiedades que llevan un guion, se suprime el guion y la siguiente letra se pone en mayúscula:

Código:

onblur = "if(this.value==''){this.style.background='url(log o02.gif)';this.style.backgroundRepeat=no-repeat;}"

También lo puedes abreviar así:

Código:

onblur = "if(this.value=='')this.style.background='url(log o02.gif) no-repeat'"

Saludos,

[salvador86]

gracias JavierB la segunda opcion resulto apelo gracias

[salvador86]

-----------------

[salvador86]

Hola JavierB, crees que al igual que se puede poner una imagen en la caja de texto se pueda poner como valor un texto, gracias

[salvador86]

Ha ya lo resolvi en caja de texto:

<input type="text" onfocus="this.value=''" onblur="if(this.value=='')this.value='Hola'" value="Hola" />

Pero en areas de texto no me sale muy bien

<textarea name="textfield4" rows="2" oonfocus="this.value=''" onblur="if(this.value=='')this.value='Tour de Interes'"></textarea>

Pues no tiene valor inical, sino entre las etiquetas textarea, ademas de esto cada vez que ingreso un valor pero despues pongo otra vez el cursor se borra, Gracias de antemano