Como usar OnMouseOver com uma única imagem em vez de dois links para ver diferentes partes da imagem

  • Autor Autor kynerox
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
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 😉
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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
 
Voltar
Topo