cambiar Imagen de Div al Hacer MouseOver

[gabriel0420]

Hola! una simpple duda jeje!!


tengo una pagina donde hay un div con una imagen grande y otros div con imagenes pequeñas quiero que al hacer mouseover sobre unas de las miniaturas esta se muestre en el lugar de la grande!!

gracias!!

[zerokilled]

lo primero, bienvenido al foro. lo segundo, acostumbrate a usar primero las herramientas del foro como el buscador y la faq. de seguro esto te dara una respuesta mas rapida que tener que esperar respuestas a tus temas. he aqui dos enlaces que encontre:
http://www.forosdelweb.com/f13/galer...e-over-613207/
http://www.forosdelweb.com/wiki/Java...r_un_MouseOver
el resto, las buscas tu. si se te presenta algun problema, nada mas muestranos lo que tienes y con eso te ayudamos.

[ElJavista]

Bien, eso no es difícil, y hay varias formas de hacerlas, te daré la idea de una forma sencilla. Debes de tener dos imagenes, el thumb y la imagen grande, ambas podrían estar en dos carpetas distintas y tener el mismo nombre. OK, ahora en el thumb debe ir este codigo

<img src="rutaabsolutadethumb" onmouseover="showImagen(this.src)" />


La función JavaScript sería la siguiente:

Código:

function showImagen(src) {
    var img = document.getElementById('mainImg');
    img.src = src.replace(/thumbs/, 'images');
}

Donde "thumbs" es el nombre de la carpeta donde se encuentran los thumbs e "images" el nombre de la carpeta donde están las imágenes grandes.

Esa es la idea básica, espero que te sirva.

[gabriel0420]

Gracias Por su Ayuda!!!

[gabriel0420]

Aun Nada!!!

je!!!

bueno lo xplicare de nuevo!!

tengo 1 div grande y tres pequeños kiero que al pasar el mouse por el div pequeño la imagen que tiene este se vea en el div grande!

<div name="imagengrande" id="ig1">
<img src="fot/2.jpg" />
</div>


<div id="imagenequeña1" >
<img src="fot/113.jpg" />
</div>

[zerokilled]

asignale el ID a la imagen que esta dentro del <div> y ve guiandote por la respuesta que ofrecio ElJavista. adicional, tienes que asignarle el evento a la imagen pequeña.

[shympheria]

Es mas sencillo si en vez de llamar al contenido del div, llamas a la ruta de la imagen:

<div name="imagengrande" id="ig1">
<img src="fot/2.jpg" id="img_m" />
</div>

<div id="imagenequeña1" >
<img src="fot/113.jpg" style="cursor:pointer;" onmouseover="document.getElementById('img_m').src = (this.src);" />
</div>

Suponiendo que las imagenes son iguales, es decir, las pequeñas son las mismas que las grandes en pequeño.


pruebalo y me comentas!:
adios:

[gabriel0420]

Gracias!!
shympheria!!

si resulto

lo que ahora me mata la cabeza es como hago

[P3n3]

<a href="http://www.google.es/6840662324/"><img src="http://www.google.es/6840662324/001_tb.jpg" title="google.es - gallery 6840662324" /></a> <a href="http://www.google.es/6840662324/"><img src="http://www.google.es/6840662324/002_tb.jpg" title="google.es - gallery 6840662324" /></a>

Como podría hacer para que con ese code al pasar el ratón por encima se ponga la otra imagen?

Y supongamos que tenemos 1000 imagenes para poner. ¿Habria que hacer esta laborioso trabajo una a una? :S