Foros del Web » Programando para Internet » Javascript »

Imagen Popup con efecto hover

Estas en el tema de Imagen Popup con efecto hover en el foro de Javascript en Foros del Web. Gente del foro, soy nuevo en la pagina, sin embargo he consultado esta pagina para aclarar mis dudas. Mi situación es la siguiente: Tengo 1 ...
  #1 (permalink)  
Antiguo 20/09/2011, 14:18
 
Fecha de Ingreso: septiembre-2011
Mensajes: 2
Antigüedad: 6 años, 2 meses
Puntos: 0
Pregunta Imagen Popup con efecto hover

Gente del foro, soy nuevo en la pagina, sin embargo he consultado esta pagina para aclarar mis dudas.

Mi situación es la siguiente:
Tengo 1 imagen en la cual si la pinchas esta abre un popup de determinadas dimenciones. O sea, la imagen es el link para abrir el pop up.

La cosa es que me gustaria que mi imagen tuviera el efecto hover (es cuando pasas el mouse encima de una imagen y esta muestra otra).

La verdad no creo que sea imposible pero por ahora solo logro hacer lo primero.

Aqui el codigo que tengo:

<a href="direcciónURL" target="_blank" onclick="window.open(this.href, this.target, 'width=800,height=550'); return false;"><img src="imagen1"/></a>

Hay alguna forma de hacer el script con 2 imagenes y esta cambie cuando el mouse pase por encima?

Gracias por su atencion ;)
  #2 (permalink)  
Antiguo 20/09/2011, 15:59
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 6 años, 7 meses
Puntos: 37
Respuesta: Imagen Popup con efecto hover

Código css:
Ver original
  1. <style type="text/css">
  2.  a:hover { background: url(imagen.gif) no-repeat scroll left; }
  3. </style>

Te recomiendo que busques información acerca de Image Sprites.


Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #3 (permalink)  
Antiguo 20/09/2011, 16:07
 
Fecha de Ingreso: septiembre-2011
Mensajes: 2
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: Imagen Popup con efecto hover

Koswi gracias, aunque la verdad no entiendo, se supone que es un script para mi blog de Blogger y bueno puedo hacer un script en CSS pero porque solo poner una URL de imagen en el script que me mandaste y no dos URL de imagenes ya que se supone que son 2 imagenes?

Gracias bro ;)
  #4 (permalink)  
Antiguo 20/09/2011, 20:09
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 6 años, 7 meses
Puntos: 37
Respuesta: Imagen Popup con efecto hover

Fácil, el servidor, en lugar de tener que cargar 2 imágenes, sólo tiene que cargar una. Esto, a menos que hagas una precarga de imágenes en javascript, hará que en el momento de poner el ratón sobre la imagen, tarde en cargar la siguiente.

Con el método que te digo optimizas y logras sin javascript el efecto deseado y de manera más eficiente.

Sólo tienes que coger las 2 imágenes y juntarlas en un mismo archivo (una a la derecha y otra a la izquierda, por ejemplo). Ahora divide el ancho de la imagen en 2 (una imagen de 100px / 2 = 50px). Ya tienes una imagen pegada a la otra, el código sería el siguiente:

Código CSS:
Ver original
  1. a
  2. {
  3.  display: block;
  4.   width: 50px; /* la mitad del ancho total de la imagen */
  5.   height: 100px; /* el alto total de la imagen */
  6.   background: url(imagen.gif) no-repeat scroll left top; /* left es igual a cero */
  7. }
  8. a:hover
  9. {
  10.   background: url(imagen.gif) no-repeat scroll 50px top; /* mostrará a partir de ese punto de la imagen */
  11. }

Prueba y nos cuentas.


Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.

Etiquetas: efecto, hover, popup
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:28.