Tutoriales en la Web

Efecto tipo rompecabezas en JQUERY

Posteado el 27. Jul, 2010 por Webi in Desarrollo Web, Jquery

Aqui puedes ver en linea lo que podrás hacer con este tutorial. Dale clic encima de cada fotografía para ver el efecto en JQUERY

PASO 1
Primero vamos a preparar las imágenes que vamos a utilizar, en este caso preapre 10 imágenes de tutoriales que anteriormente habíamos realizado y una imagen de un fondo para el texto que vamos a escribir todas estas imágenes tienen un tamaño de 200 x 200 píxeles en formato jpg y las guarde una carpeta llamada imágenes.

Efecto tipo rompecabezas en JQUERY

PASO 2
Ahora vamos a abrir Adobe Dreamweaver y vamos a crear un documento HTML en blanco.

Efecto tipo rompecabezas en JQUERY

PASO 3
Con el comando Ctrl + S salvamos nuestro HTML con el nombre de puerta corrediza.html

Efecto tipo rompecabezas en JQUERY

PASO 4
Vamos a agregar el siguiente escript justo debajo de la etiqueta Puerta corrediza.

Efecto tipo rompecabezas en JQUERY

PASO 5
Con el comando Ctrl + N vamos a crear un nuevo documento CSS.

Efecto tipo rompecabezas en JQUERY

PASO 6
Vamos al menú File - Save As (comando Ctrl + S) salvamos nuestro css dentro de una capeta llamada css con el nombre de corrediza.css

Efecto tipo rompecabezas en JQUERY

PASO 7
Ahora copiamos dentro del archivo css el siguiente código.

Code block

.qitem {
width:200px;
height:200px;
border:4px solid #222;
margin:5px 5px 5px 0;
overflow:hidden;
position:relative;
float:left;
cursor:hand;
cursor:pointer;
background-image: url(../imagenes/fondotexto.jpg);
background-repeat: no-repeat;
}
 
.qitem img {
border:0;
position:absolute;
z-index:200;
}
 
.qitem .caption {
position:absolute;
z-index:0;
color:#ccc;
display:block;
}
 
.qitem .caption h4 {
font-size:12px;
padding:10px 5px 0 8px;
margin:0;
color:#369ead;
}
 
.qitem .caption p {
font-size:10px;
padding:3px 5px 0 8px;
margin:0;
}
 
.topLeft, .topRight, .bottomLeft, .bottomRight {
position:absolute;
background-repeat: no-repeat;
float:left;
}
 
.topLeft {
background-position: top left;
}
 
.topRight {
background-position: top right;
}
 
.bottomLeft {
background-position: bottom left;
}
 
.bottomRight {
background-position: bottom right;
}
 
.clear {
clear:both;
}

Efecto tipo rompecabezas en JQUERY

PASO 8
Regresamos a nuestro documento HTML y justo por debajo de la etiqueta vamos a agregar el siguiente código que enlaza el HTML con el CSS.

Efecto tipo rompecabezas en JQUERY

PASO 9
Ahora creamos una carpeta nueva llamada js y dentro de ella colocamos lo dos js que adjunto en este tutorial.

Efecto tipo rompecabezas en JQUERY

PASO 10
En nuestro documento HTML vamos a colocarnos dentro de la parte del diseño y vamos a ir a la barras Insert – Pestaña Layout y presionamos el el botón Insert DIV Tag.

Efecto tipo rompecabezas en JQUERY

PASO 11
En la ventana Inser Div Tag vamos a colocar en los espacios Class: principal y ID: principal y luego le damos click al botón New CSS Style.

Efecto tipo rompecabezas en JQUERY

PASO 12
En la ventana New CSS Rule nos aparecera como Selector: #principal y en Define In: seleccionamos la opción corrediza.css que fue el css que creamos anteriormente, luego le damos click al botón Ok.

Efecto tipo rompecabezas en JQUERY

PASO 13
Ahora en la ventana CSS Rule Definition vamos directamente a la pestaña Box en la cual agregamos los siguiente valores y luego damos click en el botón Ok.

Efecto tipo rompecabezas en JQUERY

PASO 14
Nos aparecerá nuevamente la ventana Insert Div Tag en la cual damos click en Ok.

Efecto tipo rompecabezas en JQUERY

PASO 15
Ya tenemos nuestro div principal insertado.

Efecto tipo rompecabezas en JQUERY

PASO 16
Borramos el texto del div y dentro del el colocamos el siguiente código

Code block

<div class="qitem">
	<a href="http://www.tutorialesenlaweb.com"><img src="imagenes/1.jpg" alt="Tutoriales en la web" title="" width="200" height="200"/></a>
	<span class="caption">
	<h4>Tutorial 1</h4><p>Tutoriales en la web</p></span>
</div>

Dentro del cual podemos editar la imagen a que se utiliza el texto que va dentro del recuadro y el link.

Efecto tipo rompecabezas en JQUERY

PASO 17
Repetimos el código y cambiamos las imágenes para obtener un resultado como el que se ve en la imagen.

Efecto tipo rompecabezas en JQUERY

Descarga el editable de Efecto tipo rompecabezas con JQUERY

Articulos relacionados:

Tags: Dreamweaver, jQuery