Imagen de sustitución en Gadget (Efecto cambio sencillo)

Imagen de sustitución (Efecto cambio sencillo)

Es cierto, existen varios plugins que permiten poner efectos a las imágenes que deseas presentar en tu blog o sitio web, pero por ejemplo para el caso de Blogger u otras plataformas con ciertas limitaciones, tienes que recurrir a artilugios o buscar códigos para poder darle ese “toquecillo” que deseas para las imágenes.  ¡ En este caso, una imagen es sustituida por otra, al pasar el mouse.!

• Si deseas insertar el CSS en una plataforma No Blogger, deberás insertarlo antes de la etiqueta </head> y entre las etiquetas  <style > y </style>, por ejemplo:

<style type="text/css">
...Aquí pegas código CSS...
</style>
</head>

• En Blogger, también puedes hacerlo, pero para que no toques las plantilla, el código CSS puedes insertarlo tal como te lo muestro, utilizando las opciones: 

            Tema     -->   Personalizar    -->    Avanzado    -->    Añadir CSS 

MANOS A LA OBRA
El código CSS es el siguiente:

 /*  ===== Imagen de sustitución - Cambio simple   ======  */
#RollOverSimple a
{
   display: block;
   position: relative;
   height: 100%;
   width: 100%;
}

#RollOverSimple a img
{
   position: absolute;
   z-index: 1;
   border-width: 0;
}
#RollOverSimple span
{
   display: block;
   height: 100%;
   width: 100%;
   position: absolute;
   z-index: 2;
}
#RollOverSimple a .hover
{
   visibility: hidden;
}
#RollOverSimple a:hover .hover
{
   visibility: visible;
}
#RollOverSimple a:hover span
{
   visibility: hidden;
}
#RollOverSimple img
{
   border-width: 0;
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}

Blogger. Una vez insertado, no olvides darle clic en Aplicar al blog.  (Grabarlo)

2. Inserta el siguiente código donde desees que aparezca la imagen.

En Blogger, ahora lo que tienes que hacer es insertar lo siguiente dentro de un gadget.

  Diseño   -->   Añadir un gadget  -->   HTML/Javascript  <Insertas el código>  Grabar.

 <!-- Imagen de sustitución - RollOver Cambio Simple -->
<div id="RollOverSimple" style="position:relative;width:250px;height:250px;left:25px;overflow:hidden;z-index:0;border-radius:10px;">
<a href="url hipervinculo">
<img class="hover" alt="" src="url imagen principal" />
<span><img alt="" src="url imagen que sustituye a principal" /></span>
</a>
</div>

Recuerda que puedes definir un hipervínculo para redirigir a otro sitio o página que desees.

Puedes cambiar las dimensiones de la imágenes con widht y height.

El resultado prácticamente lo dispones tú, aunque para cualquiera de los casos puedes presentar las imágenes de una manera más atrayente que la ofrecida por blogger en su modo nativo.

Quizás también te interese:

Presentar imágenes con efecto presentación de Diario (Newspaper).