JavaScript - Al clickar caja de texto cambiar imagen.

Buenos días,

Llevo días buscando en google y dándole vueltas a un asunto sobre mi web. ¿Cómo hago en un formulario para que cuando el usuario clickee encima de un input (caja de texto) para introducir ciertos datos, cambie una imagen?

Es decir, si tengo varias cajas de texto cuando vaya a introducir datos en cada caja de texto aparecerá una imagen dependiendo de la caja de texto en la que se sitúe.

Gracias por todo y un saludo.

Saludos,

algunos ejemplos:

<input type="text" onclick="this.style.backgroundImage='url(imagen.jpg)'" value="background imagen">

<input type="text" onclick="this.style.backgroundImage='url(imagen.jpg)'" value="background imagen">

<input type="text" onclick="this.style.backgroundColor='gray'" value="background color">

<input type="text" onclick="this.style.backgroundColor='blue'" value="background color">

Cambia el color y/o la imagen y, ya está...

Espero sea útil.

Muchísimas gracias, creo que con esto puedo apañarme, voy a ver si consigo que en lugar de con un background lo haga con una imagen cualquiera.

¡¡Gracias de verdad!!

Acabo de probar el código y por desgracia no hace lo que buscaba, me debí explicar mal, mis disculpas.

Busco que cuando se haga click en la caja de texto cambie la imagen, pero cuando digo imagen no me refiero a la de dentro de la caja, sino una imagen externa, dentro del mismo formulario que las cajas pero no dentro de la misma caja.

Por ejemplo: si tenemos unas cajas de texto "a","b","c" y a su derecha no hay nada, que cuando se haga click en "a", a su derecha aparezca una imagen, de un águila por ejemplo. Cuando se haga click en la caja de texto "b", a su derecha aparezca un brujo, etc...

¿Es posible?

¡¡Saludos y gracias por vuestras respuestas!!

Saludos,

aquí tienes un ejemplo:

<input type="text" onclick="document.images['img1'].style.visibility='visible'" value=""> <img name="img1" src="imagen1.gif" style="visibility:hidden">
<br><br>
<input type="text" onclick="document.images['img2'].style.visibility='visible'" value=""> <img name="img2" src="imagen2.gif" style="visibility:hidden">
<br><br>
<input type="text" onclick="document.images['img3'].style.visibility='visible'" value=""> <img name="img3" src="imagen3.gif" style="visibility:hidden">
<br><br>
<input type="text" onclick="document.images['img4'].style.visibility='visible'" value=""> <img name="img4" src="imagen4.gif" style="visibility:hidden">

Espero sea útil.

Gracias crack, despues de muchos días intentándolo con tu ayuda ha sido posible, y no era difícil, pero uno no esta acostumbrado a tratar con javascript. Para cualquier cosa que pueda ayudarte ahí tienes mi correo, cuenta conmigo.

Un saludo y muchísimas gracias! :))