Agrandar imagen al pasar el puntero del ratón
Esta aplicación la encontré en el Blog de César.
Es para que al colocar una imagen en una entrada, al pasar el mouse por encima de ella, se agrande.
Códigos:
Después de <head> de tu plantilla, agregas estas líneas
<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: black;
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>
Aca se puede configurar la posición de la imagen que se agranda, el color de fondo, el tipo de texto, etc.
Y para agregar la imagen va este código:
El código se debe colocar donde quieran que vaya la imagen.
<a class="thumbnail" href="#thumb">
<img src="url de la imagen a usar" width="100px" height="100px" border="0" />
<span>
<img src=" url de la imagen a usar " />
<br />Texto o palabra que quieras que aparezca en la imagen</span>
</a>
Valores si quieres modificar la imagen pequeña:
width="100px"
height="100px"
border="0"
Y es así como queda:
9 Comentarios:
hola...me gusto mucho.
gracias de verdad sta de 10 tu aporte me has aiudado muchisimo grax
Excenlete aportee
sos un capo
Todo lo que está acá es para quien lo quiera utilizar.....
Bastante bueno viejo
Muy bueno. Gracias por el dato. Solo tengo un problema al utilizarlo con las imagenes que tengo en una tabla pues el .thumbnail adopta el tamaño de la celda y la imagen ampliada se muestra en este tamaño. No se como hacer para que se vea mas grande. Ayudame por favor.
quiero que me expliques como puedo hacer que al pasar el mouse por una imagen me aparesca otra al costado, o mas dicho cambie....es decir estoy asiendo una pagina de ofertas y he puesto una tabla con varias imagenes de los productos que estoy ofertando pero quiero que al pasar el mouse por esas imagenes me apararescan al costado el detalle o sus caracteristicas,,pero lo he echo como imagenes las caracteristicas........ espero que me puedan ayudar
les dejo mi email para cualquier cosa que me escriban sii
sistemas_zonamedica@hotmail.com
Hola,
he aplicado el efecto a mi web pero el problema es que yo lo hago a una imagen que está dentro de la celda de una tabla. Al agrandarse la imagen también se agranda la celda de la tabla, con lo que todo queda descolocado.
¿Habría alguna forma de hacer lo mismo pero que la imagen agrandada estuviera al lado de la imagen pequeña pero por encima de la tabla para que no se descoloque la tabla?.
Muchas gracias,
Julio Sánchez
DIOS TE BENDIGA
Déjame tu comentario......