iPhoto-like redimensionando imágenes Publicada el Martes 31 de Julio de 2007 a las 5:10 am por Infected-FX
02. Creando el track y el slider
En esta parte crearemos lo que corresponde al "Slider" que hará que nuestras imágenes se redimensionen, en este caso sería así:
- track1: Será el área donde podemos deslizar el controlador
- hadle1: Es nuestro control, el que moveremos para redimensionar
HTML:
-
<div id="track1">
-
<div id="handle1">
-
<img src="images/scaler_slider.gif" />
-
</div>
-
</div>
Ahora el código que le añadiremos a nuestra CSS
CSS:
-
#track1{
-
width:200px;
-
height:18px;
-
background-image:url('images/scaler_slider_track.gif');
-
background-repeat: repeat-x;
-
background-position: center left;
-
height:18px;
-
margin:20px auto;
-
}
-
-
#handle1{
-
width:18px;
-
height:18px;
-
}
Samuel
Julio 31, 2007 a las 8:50 am
Muy bueno ehh!!
Felicitaciones!
Me ha gustado mucho!
Chicoblog
Julio 31, 2007 a las 3:59 pm
Heeey!!!
gracias ^^
lo pondre a prueba ^^
Saludos!