Ir al contenido principal
Sesión de Estudio 8 / Ejercicio 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sesión VIII / Ejercicio 4</title>
<style type="text/css">
<!--
#contenedor{
width:600px;
border: 2 solid black;
padding: 5px;
}
#tabla{
width:458px;
margin: 0% 50%;
padding: 5px;
}
#imagen{
width:380px;
height:320px;
}
ol{
list-style:none;
margin:0px;
padding: 5px;
}
li{
font-size: 1.2em;
color: gray;
font-family: arial;
line-height: 0.5em;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
var imagen=["file:///C:/Escuela2011/Imagenes/ImgPuma.jpg", "file:///C:/Escuela2011/Imagenes/ImgNike.jpg","file:///C:/Escuela2011/Imagenes/ImgAdidas.jpg"];
var marca=["Calzado Tiempo Libre Puma", "Calzado Deportivo Nike", "Calzado Deportivo Adidas"];
var modelo=["Modelo: Ducati", "Modelo: Condorum Shox", "Modelo: Court Classic II"];
var disponibilidad=["7 al 12, en base color blanco y gris", "6 al 13, en base color blanco y negro", "7.5 al 11.5, en base color blanco y negro"];
var i= 0;
var longitud=imagen.length; //Guardar la longitud del vector que contiene las imágenes para lograr el desplazamiento
//Función mover hacia adelante
function adelante(){
var cambioimagen= document.getElementById("imagenid"); //Ruta de la imagen en el DOM
var cambiomarca=document.getElementById("marcaid"); //Ruta de la marca en el DOM
var cambiomodelo=document.getElementById("modeloid"); //Ruta del modelo en el DOM
var cambiodisponibilidad=document.getElementById("disponibilidadid"); //Ruta en el DOM
if (i==longitud-1){ //Controlar si llegó al final del array de imágenes
i=0;
cambioimagen.src=imagen[i];
cambiomarca.firstChild.nodeValue=marca[i]
cambiomodelo.firstChild.nodeValue=modelo[i]
cambiodisponibilidad.firstChild.nodeValue = disponibilidad[i];
}else{ //Saltar a la sgte. imagen hasta llegar al final de la lista
cambioimagen.src=imagen[++i] //Actualizar la imagen
cambiomarca.firstChild.nodeValue=marca[i] //Actualizar los datos de la imagen
cambiomodelo.firstChild.nodeValue=modelo[i] //Actualizar
cambiodisponibilidad.firstChild.nodeValue = disponibilidad[i]; //Actualizar
}
}
//Función mover hacia a atrás
function atras(){
var cambioimagen= document.getElementById("imagenid"); //Ruta en el DOM
var cambiomarca=document.getElementById("marcaid"); //Ruta en el DOM
var cambiomodelo=document.getElementById("modeloid"); //Ruta en el DOM
var cambiodisponibilidad=document.getElementById("disponibilidadid"); //Ruta en el DOM
if (i==0){
i=2; // Ir a la última foto si está en la primera y desea ir hacia atrás
cambioimagen.src=imagen[i]; //Actualizar
cambiomarca.firstChild.nodeValue=marca[i] //Actualizar
cambiomodelo.firstChild.nodeValue=modelo[i] //Actualizar
cambiodisponibilidad.firstChild.nodeValue = disponibilidad[i]; //Actualizar
}else{
cambioimagen.src=imagen[--i] //Saltar a la imagen anterior hasta llegar a la primera de la lista
cambiomarca.firstChild.nodeValue=marca[i] //Actualizar
cambiomodelo.firstChild.nodeValue=modelo[i] //Actualizar
cambiodisponibilidad.firstChild.nodeValue = disponibilidad[i]; //Actualizar
}
}
//-->
</script>
</head>
<body>
<div id="contenedor">
<table id="tabla">
<tr>
<td width = 38px><img src="../Imagenes/Atras.gif" height="48" width="38" onclick="atras();" /></td> <!--boton atras-->
<td width = 380px><img src="C:\Escuela2011\Imagenes\ImgPuma.jpg" id="imagenid"></td>
<td width = 38px><img src="../Imagenes/Adelante.gif" height="48" width="38" onclick="adelante();" /></td><!--boton siguiente-->
</tr>
<tr>
<td width = 38px> </td>
<td width = 380px>
<ol>
<li><p id="marcaid">Calzado Tiempo Libre Puma</p> </li>
<li> <p id= "modeloid">Modelo: Ducati</p></li>
<li> <p id= "disponibilidadid">7 al 12, en base color blanco y gris</p></li>
</ol>
</td>
<td width = 38px> </td>
</tr>
</table>
</div>
</body>
</html>