Cómo usar OnMouseOver con una sola imagen en lugar de dos enlaces para ver diferentes partes de la imagen

  • Autor Autor kynerox
  • Fecha de inicio Fecha de inicio
K

kynerox

Gamma
Social Media
Hola muchachos, tengo mas que un problema diria que una duda con la opcion de onmousover para los enlaces.

La duda que tengo es como usar la opcion de onmousover, pero las dos imagenes que tendria que usar para cuando esta el puntero del mouse sobre la imagen y cuando no esta, en vez de usar dos distintas usar una sola y ver la parte de arriva o la de abajo segun si el mouse este o no sobre la imagen, todo esto creo que generalmente se hace con coordenadas pero no se bien como.

Lo que yo se es hacerlo con dos imagenes distintas, como esta a continuacion:

<a href="#"><img width="100%" src="1.jpg" onmouseover="this.src = '2.jpg'" onmouseout="this.src = '1.jpg'" border="0" border="0"></img></a>

Lo que quiero saber es como hacerlo con la misma imagen, viendose la parte de arriva y despues la de abajo o algo asi.

Les dejo como serian las imagenes por si quieren:
La imagen 1 Enlace eliminado

La imagen 2 Enlace eliminado

Y como seria la imagen junta Enlace eliminado

Gracias y si no se entendio lo explico mejor 😉
 
Con CSS (y JS), es la unica forma, usando CSS y cambiando las coordenadas. Ejemplo mira youtube, tienen todo en un sprite, y solo cambian las coordenadas:
www-master-vfl8ZHa_q.png
 
claaro, eso para mi es lo mejor por que si no cuando se pone arriba de la imagen que tiene que cambiar recien ahi es cuando empieza a cargar y es un solo segundo pero capas en ese segundo ya hizo click y ni cambio la imagen, si alhuien lo sabe me ayudaria 😉
 
Otra forma es hacer un preload de las imagenes. Cargarlas antes de los botones.
Enlace eliminado
Enlace eliminado
 
No necesitas nada de javascript, solo necesitas leer un poco de spritly y css

La propiedad que necesitas en css es :hover
 
Atrás
Arriba