<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prueba de slider</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script language="JavaScript1.2">
<!--
var descripcion=new Array(); /* Esta es la descripcion de la izquierda*/
descripcion[1]="Esta es una aguila muy bonita";
descripcion[2]="La bandera de Estados Unidos de America";
descripcion[3]="La casita de la pradera de los Engells";
descripcion[4]="Una puesta de sol muy espectacular";
descripcion[5]="Un cisne, uno de los animales mas elegantes que hay";
descripcion[6]="Nada mejor que una linda playa";
descripcion[7]="Una carretera, nada espectacular";
descripcion[8]="Hoteles de lujo";
descripcion[9]="Un lobo Cansado y sediento";
descripcion[10]="Jaguar animal muy manchado";
var descripcion1=new Array(); /*Esta es la desripcion de la derecha*/
descripcion1[1]="Aguila, animal plumifero muy peligrosa para los ratones hay que tener cuidado con ellas";
descripcion1[2]="Al parecer esta en un cementerio";
descripcion1[3]="Un paisaje muy bonito";
descripcion1[4]="Para los que estan enamorados";
descripcion1[5]="Otro animal plumifero, pero este es muy pacifico";
descripcion1[6]="Puede ser tampico o varacruz";
descripcion1[7]="Para disfrutar unas buenas vacaciones";
descripcion1[8]="Cuanto costara una habitacion?";
descripcion1[9]="Un animal muy inteligente";
descripcion1[10]="En la selva lacandona";
var numeroimagen=1 /*para controlar en donde van las imagenes*/
function seleccion(numeroid) { /*poner imagen y descripciones*/
var imagen=1 /*por si las moscas*/
if (numeroid=="uno") {imagen=numeroimagen}
if (numeroid=="dos") {imagen=numeroimagen+1}
if (numeroid=="tres") {imagen=numeroimagen+2}
if (numeroid=="cuatro") {imagen=numeroimagen+3}
if (numeroid=="cinco") {imagen=numeroimagen+4}
var imagen1="imagenes/"+imagen+".jpg";
document.images.centro.src = imagen1;
document.getElementById("explica").innerHTML = descripcion[imagen];
document.getElementById("explica1").innerHTML = descripcion1[imagen];
}
function derecha() { /*ver imagenes de la dercha*/
numeroimagen=numeroimagen+1;
if (numeroimagen==7) {numeroimagen=1;}
document.images.uno.src = "imagenes/"+numeroimagen+".jpg";
document.images.dos.src = "imagenes/"+(numeroimagen+1)+".jpg";
document.images.tres.src = "imagenes/"+(numeroimagen+2)+".jpg";
document.images.cuatro.src = "imagenes/"+(numeroimagen+3)+".jpg";
document.images.cinco.src = "imagenes/"+(numeroimagen+4)+".jpg";
}
function izquierda() { /*ver imagenes de la izquierda*/
numeroimagen=numeroimagen-1;
if (numeroimagen==0) {numeroimagen=1;}
document.images.uno.src = "imagenes/"+numeroimagen+".jpg";
document.images.dos.src = "imagenes/"+(numeroimagen+1)+".jpg";
document.images.tres.src = "imagenes/"+(numeroimagen+2)+".jpg";
document.images.cuatro.src = "imagenes/"+(numeroimagen+3)+".jpg";
document.images.cinco.src = "imagenes/"+(numeroimagen+4)+".jpg";
}
-->
</script>
</head>
<body bgcolor="#777777">
<div id="miniimagen" align="center">
<h2>Pon el mouse en la imagen para agrandar Slider 1</h2>
<img src="imagenes/left.gif" class="bordominiimagen" onmouseover="izquierda()"/>
<img src="imagenes/1.jpg" id="uno" width="100" height="80" class="bordominiimagen" onmouseover="seleccion(this.id)"/>
<img src="imagenes/2.jpg" id="dos" width="100" height="80" class="bordominiimagen" onmouseover="seleccion(this.id)"/>
<img src="imagenes/3.jpg" id="tres" width="100" height="80" class="bordominiimagen" onmouseover="seleccion(this.id)"/>
<img src="imagenes/4.jpg" id="cuatro" width="100" height="80" class="bordominiimagen" onmouseover="seleccion(this.id)"/>
<img src="imagenes/5.jpg" id="cinco" width="100" height="80" class="bordominiimagen" onmouseover="seleccion(this.id)"/>
<img src="imagenes/right.gif" class="bordominiimagen" onmouseover="derecha()"/>
</div>
<div id="izquierdas1">
<div id="explica" class="cuerpo">
Esta es una aguila muy bonita
</div>
</div>
<div id="centros1" align="center">
<img src="imagenes/1.jpg" id="centro" width="300" height="240" class="bordoimagen"/>
</div>
<div id="derechas1">
<div id="explica1" class="cuerpo">
Aguila, animal plumifero muy peligrosa para los ratones hay que tener cuidado con ellas
</div>
</div>
</body>
</html>