Cambio de imagen con hover – Register – Auto ~ CosasParaMiBlogs

Este truquillo tiene diversas aplicaciones, aunque en un principio, sólo se trata de crear unas clases CSS, para que al pasar el puntero por una imagen, se pueda solapar otra por encima.

Esta sería la parte CSS común:

#contenedor {
position: relative;
}
.miniatura{
z-index: 1001;
text-decoration: none;
}
.miniatura img {
border: 0px;
}
.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
top:0px;
left:0px;
}
.miniatura:hover span {
visibility: visible;
overflow:visible;
z-index: 1002;
}

La primera utilidad que se me ocurre es que haya dos imágenes iguales y la primera se muestre más pequeña para que el hover funcione a modo de ampliación de miniatura.

div id="contenedor"
a href="javascript:void(0);" class="miniatura"
img src="URL_IMAGEN" alt="" style="width:100px;" /
spanimg src="URL_IMAGEN" alt=""//span
/a
/div

Lo único a destacar en este HTML es que las dos direcciones de imagen son idénticas (es la misma imagen), pero la primera incluye unWIDTH para forzar su menor tamaño. La segunda, en este caso y en los siguientes, siempre estará "rodeada" por unSPAN para provocar el efectoHOVER.

Otra forma de utilizar este CSS, sería para simular unrollover sin utilizar JavaScript.

El código HTML sería el mismo de antes, pero sin incluir ningúnWIDHT y utilizando una segunda imagen, que en este caso era la misma pero invertida.

div id="contenedor"
a class="miniatura" href="javascript:void(0);"
img alt="" src="URL_IMAGEN1" /
spanimg alt="" src="URL_IMAGEN2" //span
/a
/div

Podemos aprovechar este mismo codigo para mostrar una información adicional, complementaria o incluso un detalle, con respecto a la imagen base.

En esta ocasión, no ha sido necesario utilizar elWIDTH, puesto que las dos imágenes ya las hemos construido del tamaño que nos venía bien. No obstante, se podrían haber redimensionado como antes sin problemas.

Otra posiblidad más. Ahora sustituimos la segunda imagen por un texto y añadimos estilo alSPAN.

Trichogaster Leeri. Procede de ríos de aguas tranquilas y densamente plantados de Malasia, Borneo y Sumatra. El macho tiene el cuerpo más rojo y sus aletas anal y dorsal alargadas.

div id="contenedor"
a class="miniatura" href="javascript:void(0);"
img alt="" src="URL_IMAGEN1" /
spanstyle="background:#ffffff;padding:10px;"Trichogaster Leeri. Procede de ríos de aguas tranquilas y densamente plantados de Malasia, Borneo y Sumatra. El macho tiene el cuerpo más rojo y sus aletas anal y dorsal alargadas./span
/a
/div

Para un efecto algo distinto, podeis cambiar en el CSS, los valores deTOP yLEFT, de manera que el segundo elemento, salga desplazado con respecto al vértice superior izquierdo del primero.

En fin, ahí queda la idea y que cada cual le de el uso que necesite. Y si se os ocurren más ¡no dudeis en comentarlo!

Nota: ¿Esto te viene bien Jaime? ;)

CosasParaMiBlogs

martes, 26 de octubre de 2010

Cambio de imagen con hover – Register – Auto

Popular Posts

Blogger news

Labels

Blog Archive