JMiur [E]

Esta son dos formas sencillas de crear un efecto fade sobre una imagen, permutando una por otra.

En la primera, sólo usaremos CSS así que el el efecto no funcionará en versiones inferiores a IE9; el HTML para ambos es este:
<div id="ejemplo">
  <img src="URL_IMAGEN"/>
</div>
Y el CSS sería algo así:
<style type="text/css">  
  /* al DIV contenedor lo centramos centramos y dimensionamos */
  #ejemplo {
    cursor: pointer;  
    height: 375px;  
    margin: 0 auto;
    position: relative;
    width: 500px;  
    /* y acá, colocamos la segunda iamgen como fondo */
    background: transparent url(URL_OTRA_IMAGEN) no-repeat left top;  
  }  
  /* a la etiqueta IMG interna, le agregamos el efecto y la transición */
  #ejemplo img {
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 1;
    /* agreamos el filtro para que en IE8 funcione aunque no sea animado */
    filter:alpha(opacity=100);
  }
  /* al poner el cursor encima, la imagen se oculta así que lo que veremos es el fondo de la segunda imagen */
  #ejemplo:hover img {
    opacity:0;
    filter:alpha(opacity=0);
  }
</style>

La otra forma simple es utilizando la librería jQuery.

Como dije, el HTML es exactamente el mismo y el CSS es más corto:
<style type="text/css">  
  /* al DIV contenedor lo centramos centramos y dimensionamos */
  #ejemplo {
    cursor: pointer;  
    height: 375px;  
    margin: 0 auto;
    position: relative;
    width: 500px;  
    /* y acá, colocamos la segunda imagen como fondo */
    background: transparent url(URL_OTRA_IMAGEN) no-repeat left top;  
  }  
</style>
Obviamente, nos falta el script:
<script type="text/javascript">
  $(document).ready(function() {
    $("#ejemplo").hover(function(){
      $(this).find("img").fadeOut();
    }, function() {
      $(this).find("img").fadeIn();
    });
  });   
</script>

11 comentarios:

Anónimo  

Hola. Disculpa, pero tengo una duda fuera del tema. Quiero cambiar la plantilla de mi blog de pruebas, pero cuando lo hago aparecen muchos widgets que borre hace mucho tiempo, y eso hace que desaparezcan algunos widgets que la plantilla deberia traer (por ejemplo, un widget que tenia hace mucho tiempo hace que desaparezca el slider que la nueva plantilla debe traer).

¿Hay alguna forma de cambiar la plantilla sin que aparezcan esos widgets antiguos? No importa si se borran, solo quiero lo que traiga la nueva plantilla

De antemano agradezco la ayuda

Responder
Beben Koben  

Interesting hover trick :)
why use the id attribute, not a class...hihihi ;)

Responder
Unknown  

El efecto queda igual, por lo tanto me quedo con el primero :P

Responder
Beben Koben  

when we use images with small resolution, but has no effect on the background attribute width: 500px and height: 375px

Responder
Ikanus  

Hola JMiur, no tiene mucho que ver con la entrada mi comentario: tengo un script que muestra las entradas pero siempre se muestra la más reciente al inicio y la más antigua al final. Lo que quiero es hacerlo al reves, ordenarla primero la antigua y al final la más reciente. ¿Hay alguna forma de hacerlo con blogger, javascript y json? Gracias.,

Responder
Gildo Kaldorana  

Feliz Año 2012 JMiur, salud y suerte.
Muchas gracias por tus enseñanzas
Gildo

Responder
JMiur  

Don Choky:
Si n ote intersa mantener los widgets del blog original, elimínalos previamente y de ese modo, no tendrás problemas.

Beben Koben:
Because its's an unique tag. If it was a class all tags with the same class will change and if in the page there's only one tag with that class using class or ids it's the same. Class must be used to declare repetitives styles.

Of course, the size of the images must be the same.

Todo, suyo, Graciela :-)

No sé cuál es ese script, Ikanus; habría que verlo.

Gracias, Gildo. Feliz año.

Responder
JS_Toni  

Hola JMiiur Que es lo que haces para mostrar los codigos y no se ejecuten ?

Responder
JMiur  

Se deben escribir reemplazando los caracteres < y > por sus respectivas enntities que son:
< se escribe &lt;
> se escribe &gt;

Responder
Jordi  

No se como poner la URL de la segunda imagen. Es dentro de los parentesis sin más o hay alguna sintàxcis determina. Yo la coloco entre los parèntesis pero sale la primera imagen i al hacer el fade no se ve nada.
Gracias

JMiur  

La segunda imagen se colcoa en la propiedad background:

background: transparent url(URL_OTRA_IMAGEN) no-repeat left top;

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR