Trucos para paginas web: octubre 2008

E ste es un muy buen truco, que descubrí hace tiempo, y que nunca es tarde para desenterrar, es para agrandar una imagen con simplemente pasarle el puntero del mouse sobre el.
Ej:

Asi es Key

Para llegar a este resultado nos debemos situar en Plantilla/ Edición de HTML y justo después de <head> aplicamos el siguiente código:

Es importante que siempre antes que hagas un cambio en la plantilla guardes una copia, por si el truco no te funciona o no te gusta puedas volver a lo que tenías.
Nada es infalible...^_^

<style type='text/css'>
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 10px; /*position where enlarged image should offset horizontally */
}

</style>

Después de añadir el código en la plantilla, queda añadir el siguiente código justo donde deseamos que salgan las imágenes en nuestra entrada.

<a class="thumbnail" href="#thumb"><img src="aquí-la-url-de-la-imagen" /><span><img src="aquí-la-url-de-la-imagen" width="100px" height="100px" border="1" /><br />Texto si se desea poner</span></a>

Con este código podemos configurar a nuestro gusto el tamaño de la imágen que se amplía, la posición (width="100px" height="100px"), el borde (border="1"), y nos da la posibilidad de agregar un texto en la base de la imágen.
Y pronto, magia...

Lo descubrí hace tiempo en el blog de César, gran fuente de conocimiento, que lamentablemente ya no está publicando. (César, gracias totales !) ;)
Seguir Leyendo...[+/-]

Trucos para paginas web

miércoles, 15 de octubre de 2008

Badges

lunes, 13 de octubre de 2008

Imagenes que se agrandan