Capitulos de este wiki
  1. 1 Cómo hacer zoom con una sóla imagen

Cómo hacer zoom con una sóla imagen - Cómo hacer zoom con una sóla imagen

1 - Cómo hacer zoom con una sóla imagen

[editar]
Tutorial creado por blogpocket. Extraido de: http://www.blogpocket.com/blog/wp-content/themes/yadda/index.php?fic=tutorialzoom
07 de Marzo de 2006
El efecto que queremos crear es que al pinchar sobre una imagen pequeña (thumbnail), ésta se agrande (zoomed). Esto se puede realizar con CSS simplemente definiendo dos imágenes distintas (una pequeña y otra grande) para los estados normal y hover del enlace. Es decir, si el enlace es:

<a href="zoomed.jpg">ver imagen</a>

se definen en el CSS:

#zoom a {
...
background: url("thumbnail.jpg") top left no-repeat;
...
}
#zoom a:hover {
...
background-image: url("zoomed.jpg");
...
}

Donde thumbnail.jpg y zoomed.jpg son los ficheros correspondientes a las imágenes grande y pequeña respectivamente.
Sin embargo, veamos cómo podemos realizar este mismo efecto usando una única imagen. El truco consiste en utilizar un fichero común con las dos imágenes y las propiedades background-position, width y height, en el estado hover del link que apunta a la imagen, y situarla en el trozo que corresponde a la imagen grande.
El fichero que vamos a utilizar como ejemplo es awandieboth.jpg, cuya dimensión, en píxeles, es 218 de ancho y 265 de alto. La imagen pequeña mide 136 de ancho por 101 de alto y la imagen grande, 218 de ancho por 164 de ancho.
El texto que acompaña a la imagen thumbnail, junto con el enlace a la imagen, se incluye dentro de un bloque definido en el CSS como id=zoom:

<div id="zoom">
  • lt;a href="awandieboth.jpg">Ver foto</a>

Lorem ipsum dolor sit ...
</div>

Esto permitirá, también, para navegadores que no visualicen bien el CSS, acceder a las dos imágenes al mismo tiempo.
Veamos la definición del estado normal de a:

#zoom a {
float: right;
margin: 0 0 10px 10px;
border: 1px solid #000;
text-indent: -8em; /* hide the link text */
overflow: hidden;
display: block;
width: 136px; /* show only thumbnail */
height: 101px;
background: url(awandieboth.jpg) no-repeat top left;
}

En widht y height se ponen las dimensiones de la imagen pequeña (136x101). En background se pone el fichero con las dos imágenes, ajustado al tamaño de la caja. El parámetro 'text-indent', con el valor negativo de 8em permite desplazar el texto del enlace 'ver imagen' hacia la izquierda, lo que hace que desaparezca.
'Overflow: hidden' ajusta el tamaño del contenido al declarado del elemento. Esto se realiza siempre que el contenido de un elemento no encaja o coincide con el rectángulo definido por alguna de las propiedades top , left , height y width. 'Display: block' indica que la definición corresponde a un elemento de bloque, no de línea (<em>) ni de lista (<li>). 'Float: right' ajusta la caja con la imagen a la derecha y 'margin' y 'border' establecen los margenes y el tipo de borde.
Con el estado 'hover' se establecen las dimensiones de la caja y sus propiedades, al pasar el ratón por encima de la imagen pequeña. Aquí, el parámetro 'background-position' juega el papel protagonista de este truco:
#zoom a:hover {
width: 218px; /* adjust size to zoomed photo */
height: 164px;
background-position: 0 -101px; /* move the image so only the big one shows */
}

La caja se redimensiona a un tamaño de 218x164 y los valores de la propiedad 'background-position' colocan la imagen grande del fichero awandieboth.jpg en esta nueva caja que tiene justamente el mismo tamaño. 0 y 104 son los valores del eje X (posición horizontal) y del eje Y (posición vertical) del fichero awandieboth.jpg que queremos llevar a la esquina superior izquierda de la caja que se define en el estado hover. Es decir, si suponemos que el punto (0,0) es la esquina superior izquierda, con background-position: 0 -101px colocamos la imagen en el punto (0,-101) que es como si desplazáramos la imagen 101 píxeles hacia arriba, justamente para situar la imagen grande del fichero awandieboth.jpg en esta nueva caja.
Pueden ver el ejemplo completo.
[editar]

Sé el primero en opinar


Tutoriales relacionados con 'Cómo hacer zoom con una sóla imagen'

Este tutorial, está basado en el artículo Fast rollovers, no preload needed y en el... Más »
Este libro consiste en una serie de tutoriales cuyo objetivo es el ayudar al usuario... Más »

Autor y licencia de 'Cómo hacer zoom con una sóla imagen'

Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.