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.
PASO 2
Ahora vamos a abrir Adobe Dreamweaver y vamos a crear un documento HTML en blanco.
PASO 3
Con el comando Ctrl + S salvamos nuestro HTML con el nombre de puerta corrediza.html
PASO 4
Vamos a agregar el siguiente escript justo debajo de la etiqueta Puerta corrediza.
PASO 5
Con el comando Ctrl + N vamos a crear un nuevo documento CSS.
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
PASO 7
Ahora copiamos dentro del archivo css el siguiente código.
.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;
}
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.
PASO 9
Ahora creamos una carpeta nueva llamada js y dentro de ella colocamos lo dos js que adjunto en este tutorial.
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.
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.
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.
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.
PASO 14
Nos aparecerá nuevamente la ventana Insert Div Tag en la cual damos click en Ok.
PASO 15
Ya tenemos nuestro div principal insertado.
PASO 16
Borramos el texto del div y dentro del el colocamos el siguiente código
Dentro del cual podemos editar la imagen a que se utiliza el texto que va dentro del recuadro y el link.
PASO 17
Repetimos el código y cambiamos las imágenes para obtener un resultado como el que se ve en la imagen.
Descarga el editable de Efecto tipo rompecabezas con JQUERY
oscar
05. Nov, 2011
Waooo esta loco el efecto, me da la idea de un menu usando este método
Aby
19. May, 2012
Muy buen tutorial, pero tengo una duda estoy modificando un panel para php-fusion que aplica lo explicado aca exactamente, pero tengo el problema que solo toma la esquina superior izquierda de mi imagen para cada seccion (topLeft, topRight, bottomLeft, bottomRight)… tienes idea de porque pasa eso?? >-<