Consulta simple de imagen

[copado]

Buenas Noches! Me precento soy chris. y mi consulta consiste asi.

Quiero saber que codigo javascript tengo q usar. para lograr esto;
Tengo tres textos. TEXTO1 TEXTO2 TEXTO3- y debajo una imagen. IMAGEN1 , Lo que quiero es que al pasar el mouse sobre Texto1 la imagen cambie a Imagen2. y al pasaro x Texto2 la imagen cambie a IMAGEN3 asi sucesibamente. Pero al salir del texto con el cursor. vuelva a imagen1. que la imagen1 sea la predeterminada y este siempre. mientras el mouse no este sobre los textos. Espero que me ayuden y desde ya muchas gracias

Y perdonen si el tema no iba aca.

[mayid]

Esto se hace con javascript, y hay ejemplos en el foro de javascript.

Basicamente, necesitas identificar las fotos con un id. Y tenerlas todas cargadas en el mismo div, quizas con un z-index y position absolute para que no se desplieguen una abajo de la otra.

El codigo para cambiar de foto seria esto :

<img src="foto3.jpg" alt="" id="foto3" class="fotos" style="visibility:hidden" />

document.getElementById('foto3').style.visibility= "visible"

Si pusieras tambien un class name para las fotos, podrias esconder las restantes de un solo saque, al mostrar una nueva:

document.getElementsByClassName('fotos').style.vis ibility="hidden"

Para el disparador, esto funcionaria:
onclick="document.getElementsByClassName('fotos'). style.visibility="hidden"; document.getElementById('foto3').style.visibility= "visible""

[copado]

Mayid gracias por contestar. pero me podrias ayudar un poco mas, Es que no se muy bien como ordenar todo lo que tu me dijistes. y que me funcione. Ya que no se mucho sobre esto. Si me ayudarias con un ejemplo te agradeceria muchisimo.

[mayid]

Necesito el codigo original para modelarlo. Dame los textos que disparan la aparicion / desaparicion. Mismo el div, y las imagenes, asi construyo el ejemplo. (me refiero al html que usas).

[mayid]

Que tal algo asi?

<div>
<img class="fotos id="foto1" src="foto1" style="visibility: visible" alt="" />
<img class="fotos id="foto2" src="foto2" style="visibility: hidden" alt="" />
<img class="fotos id="foto3" src="foto3" style="visibility: hidden" alt="" />
</div>

<p onmouseover="document.getElementsByClassName('foto s'). style.visibility="hidden"; document.getElementById('foto1').style.visibility= "visible"">texto 1</p>
<p onmouseover="document.getElementsByClassName('foto s'). style.visibility="hidden"; document.getElementById('foto2').style.visibility= "visible"">texto 2</p>
<p onmouseover="document.getElementsByClassName('foto s'). style.visibility="hidden"; document.getElementById('foto3').style.visibility= "visible"">texto 3</p>

[kseso?]

Hola Copado
Si sigues interesado en realizarlo sin js, sólo con css, este ejemplo de Mikmoro puede serte útil (pienso)
http://www.araudi.net/ejemplos/cambio_fondo_frente.html

[copado]

Gracias chicos fueron de mucha ayuda!