elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía rápida para descarga de herramientas gratuitas de seguridad y desinfección


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Ayuda] Galeria con efecto de cambiar imagen al pasar el mouse (javascript)
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Ayuda] Galeria con efecto de cambiar imagen al pasar el mouse (javascript)  (Leído 3,252 veces)
Graphixx


Desconectado Desconectado

Mensajes: 1.336


Full Stack Developer


Ver Perfil WWW
[Ayuda] Galeria con efecto de cambiar imagen al pasar el mouse (javascript)
« en: 8 Enero 2013, 00:37 am »

Hola compañeros alguien sabe como lograron el efecto de las fotos en esta pagina:
http://www.colombianrealty.com/16331-apartamento-para-la-renta-en-el-poblado

pueden ver que cuando uno pasa sobre las imagenes la imagen principal cambia.


Yo tengo medio idea de que es asi:

Código:
<script language="javascript">

function img_sobre(imgname)

{

document.getElementById("imageppal").src = imgname;

}

</script>



$pics .= '<img src="images/'.$codigo.'/th_'.$col_th['file_or'].'" id="imgppal" name="imgppal" onmousemove="img_sobre(\'images/'.$codigo.'/'.$col_th['file_or'].'\');" height="77" width="98" alt="'.strtoupper(mysql_result($resp,0,"titulo")).'" title="'.strtoupper(mysql_result($resp,0,"titulo")).'" >';

pero no me funciona, asi que algo debe de hacer falta.

Ya encontre como era aca:
http://www.guruc.com/tips_programacion/galeria.html


« Última modificación: 8 Enero 2013, 02:06 am por Graphixx » En línea

Nada tiene fin solo hay pequeñas pausas, pausas que determinan el comienzo de otros. Graphixx Rōninnovation
EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: [Ayuda] Galeria con efecto de cambiar imagen al pasar el mouse (javascript)
« Respuesta #1 en: 8 Enero 2013, 09:04 am »

Tambien se puede hacer con css sin necesidad de utilizar js para no complicarse demasiado.

25+ CSS Image Galleries
http://www.web3mantra.com/2011/03/28/25-css-image-galleries/

50 Excellent Image Galleries You Can Use Today
http://net.tutsplus.com/articles/web-roundups/50-excellent-image-galleries-you-can-use-today/

Lo que te falta es utlizar la funcion img_sobre para declara la ruta del la imagen, mira hay generados unos archivos en js llamados

colombianrealty.com/16331-apartamento-para-la-renta-en-el-poblado/event/seq/1/onmousemove

...

colombianrealty.com/16331-apartamento-para-la-renta-en-el-poblado/event/seq/8/onmousemove

Y solamente tienen 3 lineas de codigo

event/seq/1/
Código
  1. function onmousemove(event) {
  2. img_sobre('images/16331/16331 (4).jpg'); /* www.colombianrealty.com/images/16331/16331%20(2).jpg */
  3. }
  4.  

Aqui se declara la ruta de la imagen, no del thumb (th_16331%20(1).jpg).


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
galeria de fotos, comprobar tipo de imagen « 1 2 »
PHP
DJmixmancar 10 4,818 Último mensaje 24 Agosto 2009, 05:55 am
por Karman
Efecto slide o Easyng en javascript « 1 2 »
Desarrollo Web
Riki_89D 13 10,135 Último mensaje 23 Diciembre 2010, 15:58 pm
por Spider-Net
[Ayuda] Tengo un problema al pasar una imagen iso a mi pc
GNU/Linux
S E 7 E N 5 3,315 Último mensaje 15 Mayo 2017, 07:17 am
por Randomize
cambiar el nombre de una imagen en php - ayuda
PHP
ppfenix79 0 2,402 Último mensaje 30 Agosto 2020, 13:13 pm
por ppfenix79
Dibujar un corazón con el mouse al cargar la página (javascript)
Desarrollo Web
Beginner Web 0 3,054 Último mensaje 22 Enero 2023, 02:48 am
por Beginner Web
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines