Image Switcher con Jquery

Posteado el 01. Jan, 2011 por tuto in Dreamweaver

En este tutorial te enseñaremos como realizar con Jquery un cambio de imagenes en este link puedes ver el demo. Esperamos te guste

PASO 1
Creamos una carpeta nueva llamada Switch dentro de la cual vamos a crear una carpeta llamada imágenes donde vamos a colocar las imágenes que vamos a utilizar en este tutorial.

PASO 2
Vamos a Adobe Dreanweaver y creamos un documento nuevo HTML.

PASO 3
Debajo de la etiqueta Image Switch Jquery vamos a copiar el siguiente código html4strict.

Code block

<link rel='stylesheet' type='text/css' href='css/estilo.css' />

PASO 4
Guardamos nuestro documento dentro de la carpeta Switch con el nombre switcher.html.

PASO 5
Presionamos el comando Ctrl + N y creamos un nuevo documento CSS.

PASO 6
Dentro del documento CSS copiamos el siguiente código CSS.

Code block

* { margin: 0; padding: 0; }
body {
	font: 14px Georgia, serif;
	background-image: url(../imagenes/bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
#page-wrap { width: 500px; margin: 20px auto; position: relative; }
a { text-decoration: none; color: black; }
 
.image-link {
	display: block;
	width: 500px;
	height: 500px;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../images/1.jpg);
}
 
#one { background: url(../imagenes/1.jpg) no-repeat; z-index: 2; }
#two { background: url(../imagenes/2.jpg) no-repeat; }
#three { background: url(../imagenes/3.jpg) no-repeat; }
#four { background: url(../imagenes/4.jpg) no-repeat; }
#five { background: url(../imagenes/5.jpg) no-repeat; z-index: 2; }
#six { background: url(../imagenes/6.jpg) no-repeat; }
#seven { background: url(../imagenes/7.jpg) no-repeat; }
#eight { background: url(../imagenes/8.jpg) no-repeat; }
 
#one span { position: absolute; left: 0; bottom: -35px; }
#two span { position: absolute; left: 0; bottom: -65px; }
#three span {
	position: absolute;
	left: 240px;
	bottom: -35px;
}
#four span { position: absolute; left: 120px; bottom: -65px; }
#five span {
	position: absolute;
	left: 360px;
	bottom: -35px;
}
#six span {
	position: absolute;
	left: 240px;
	bottom: -65px;
}
#seven span {
	position: absolute;
	left: 120px;
	bottom: -35px;
}
#eight span {
	position: absolute;
	left: 360px;
	bottom: -65px;
}
 
.image-link span { width: 109px; display: block; height: 19px; padding: 5px; background: #eee; border: 1px solid #ccc; }
.image-link:hover { z-index: 100; }
.image-link:hover span { background: #ccc; }

PASO 7
Presionamos el comando Ctrl + S y guardamos nuestro documento dentro de la carpeta css con el nombre estilo.css.

PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas vamos a copiar el siguiente código html4strict.

Code block

<div id="page-wrap">
 
		<div id="switcher-wrap">
    		<a href="#" name="one" class="image-link" id="one"><span>Imagen 1</span></a>
    		<a id="two" class="image-link" href="#"><span>Imagen 2</span></a>
    		<a id="three" class="image-link" href="#"><span>Imagen 3</span></a>
    		<a id="four" class="image-link" href="#"><span>Imagen 4</span></a>
            <a href="#" name="one" class="image-link" id="five"><span>Imagen 5</span></a>
    		<a id="six" class="image-link" href="#"><span>Imagen 6</span></a>
    		<a id="seven" class="image-link" href="#"><span>Imagen 7</span></a>
    		<a id="eight" class="image-link" href="#"><span>Imagen 8</span></a>	</div>
 
</div>