Imagen Popup con efecto hover

[rulobairo]

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 ;)

[KoswiDigital]

Código css:

<style type="text/css">
 a:hover { background: url(imagen.gif) no-repeat scroll left; }
</style>
 

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


Un saludo.

[rulobairo]

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 ;)

[KoswiDigital]

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:

a
{
 display: block;
  width: 50px; /* la mitad del ancho total de la imagen */
  height: 100px; /* el alto total de la imagen */
  background: url(imagen.gif) no-repeat scroll left top; /* left es igual a cero */
}
a:hover
{
  background: url(imagen.gif) no-repeat scroll 50px top; /* mostrará a partir de ese punto de la imagen */
}
 

Prueba y nos cuentas.


Un saludo.