<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sesión VIII / Ejercicio 5</title>
<style type="text/css">
<!--
body{ /* Imagen de fondo */
/*background-image:url("C:\Escuela2011\Fondos\FondoSE8E5.jpg");*/
background-color: gray;
font-size: 12px;
font-family: arial;
}
#contenedor{ /* Division General*/
width:700px;
height: 1000px;
padding: 5px;
border: none;
}
#cabecera{ /* Division cabecera*/
height: 150px;
width: 900px;
border: none;
}
#visor{ /* Division imagen grande */
width:380px;
height: 320px;
margin: 50px 10px 10px 70px; /*Margen: desde arriba, agujas reloj */
padding: 0px;
float: left;
border: 10px solid silver; /* rgb(88,72,69)*/
background-color: white; /* Color de fondo de la imagen grande*/
}
.individual{ /* Division imágenes pequeñas */
width:150px;
height: 80px;
margin: 50px 20px 0px 0px; /*Margen: desde arriba, agujas reloj */
padding: 0px;
float: left;
border: 10px solid silver;
background-color: white; /* Color de fondo de las imagenes pequeñas*/
}
.individualclase{ /*Caracteristicas imágenes pequeñas*/
width:150px;
height:80px;
margin:0px;
padding: 0px;
border: none;
}
/* Opacidad para las imágenes */
a.opacidad img { /* Al iniciar */
filter:alpha(opacity=50);/* IE genérico */
-moz-opacity: 0.5;/* Hacks: buscar en el blog publicacion 2010 al respecto */
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.opacidad:hover img{ /* Al pasar por encima */
filter:alpha(opacity=100);/* IE genérico */
-moz-opacity: 1.0;/* Hacks: buscar en el blog publicacion 2010 al respecto */
opacity: 1.0;
-khtml-opacity: 1.0;
}
.imgvisor { /* Imagen grande */
margin: 0 auto; /* Centrada */
overflow: hidden;/* Ocultar el desbordamiento de la imagen*/
position: relative;
width:380px; /* Ancho total (imagen + marco) */
height:320px;
}
.imgvisor a {text-decoration: none;}/*Quitar el subrayado a los enlaces */
.imgvisor a:hover {cursor: pointer;} /* Inicializar el puntero del mouse*/
.imgvisor a img { /* Caracteristicas de la imagegen grande */
background-color: white; /*Color del marco */
border: none;
margin: 0px;
padding: 0px; /* Espaciado interno */
width: 378px; /* Tamaño de la imagen */
height:320px;
}
.imgvisor a .vermas{ /*Area traslúcida de Vermás */
background-color: silver; /*Color de fondo */
color: black;/* Propiedades del texto */
font-wight: bold;
font-size: 14px;
padding: 5px 10px;
filter:alpha(opacity=65);/* Transparencia IE genérico */
opacity:.65; /* IE genérico */
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
position: absolute; /* Posicionamiento del texto: abajo, a la izquierda*/
bottom: 14px;
right: 10px;
}
.imgvisor a .caracteristicasimagen {
display: none; /*Ocultar zona de caracteristicas*/
}
.imgvisor a:hover .vermas {
visibility: hidden; /* Ocultar boton Vermas*/
}
.imgvisor a:hover .caracteristicasimagen { /* Texto descriptivo de la imagen */
background-color: white ; /* rgb(88,72,69);color de fondo */
display: block;/* Mostrar en bloque para evitar desplazamientos */
margin: 0px;
width: 378px; /* Ocupará el mismo ancho de la imagen */
color: black;/* Propiedades del texto */
padding: 0px 0px 0px 5px;
filter:alpha(opacity=80); /* Transparencia */
opacity:.80;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
position: absolute; /* Posicionamiento: abajo, a la derecha */
bottom: 2px;
left: 0px;
}
.imgvisor a:hover .caracteristicasimagen strong{ /* Ver más */
display: block; /* Mostrar en bloque para evitar desplazamientos */
font-size: 14px;
color: black;
line-height: 2em; /* Espaciado entre lineas*/
padding: 0px 0px 0px 5px;
margin: 0px;
}
.cambios{ /* Zona de paginado*/
clear: both;
width:170px;
height: 30px;
margin: 0px 10px 10px 340px; /*Margen: desde arriba, agujas reloj */
padding: 0px;
float: left;
border: none;
font-size: 15px;
}
.compras{ /* Zona de paginado*/
clear: both;
width:380px;
height: 30px;
margin: 0px 10px 10px 70px; /*Margen: desde arriba, agujas reloj */
padding: 0px;
float: left;
border: none;
font-size: 15px;
}
.iluminar a:hover {/* Zona de paginado: enlace */
color: white;
}
.iluminar a{/* Zona de paginado: enlace */
text-decoration:none;
color: black;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
var titulos =["ADIDAS KUNDO II", "ADIDAS COURT CLASSIC II", "ADIDAS SUPER STAR", "NIKE CHUTEIRA TURF", "NIKE DART IX", "NIKE SHOX TURBO III"];
var codigos =["G29398", "A12982", "S91277", "F45671", "H12898", "P21134"];
var textos = ["Estilo: Trainning / Capellada: Cuero vacuno flor /Forro: Textil (poliester 100%) /Suela: Sintético / Origen: Argentina.", "Estilo: Tennis. / Capellada: Cuero vacuno flor / Forro: Textil (poliester 100%) / Suela: Sintetico - Espigada. / Origen: Brasil.", "Estilo: Tennis / Capellada: Cuero ecológico / Forro: Poliester 100% / Suela: Sintetico - NonMarking. / Origen: Indonesia.", "Estilo: Performance / Capellada: Cuero vacuno flor /Forro: Textil (poliester 100%) /Suela: Sintético - 28 Tapones / Origen: Vietnam.", "Estilo: Running / Capellada: Mesh /Forro: Textil (poliester 100%) /Suela: Sintético / Origen: Brasil.", "Estilo: Running / Capellada: Mesh /Forro: Textil (poliester 100%) /Suela: Sintético - Resortes independientes / Origen: Indonesia."];
var ureles = ["file:///C:/Escuela2011/Imagenes/AdidasKundo.jpg", "file:///C:/Escuela2011/Imagenes/AdidasCourtClassicBlancaII.jpg", "file:///C:/Escuela2011/Imagenes/AdidasSuperStar.jpg", "file:///C:/Escuela2011/Imagenes/NikeChuteiraSocietyT90ShootII.jpg", "file:///C:/Escuela2011/Imagenes/NikeDart9.jpg","file:///C:/Escuela2011/Imagenes/NikeShoxTurboIII.jpg"];
var nombreproducto =["kundo", "court", "super", "Chuteira", "Dart", "Shox"];
var urelesmall = ["file:///C:/Escuela2011/Imagenes/AdidasKundoSmall.jpg", "file:///C:/Escuela2011/Imagenes/AdidasCourtClassicBlancaIISmall.jpg", "file:///C:/Escuela2011/Imagenes/AdidasSuperStarSmall.jpg", "file:///C:/Escuela2011/Imagenes/NikeChuteiraSocietyT90ShootIISmall.jpg", "file:///C:/Escuela2011/Imagenes/NikeDart9Small.jpg", "file:///C:/Escuela2011/Imagenes/NikeShoxTurboSmall.jpg"];
var numeropagina = '1';
function inicializar(t, c, txt){
var inicializarmodelo= document.getElementById("titulo");
var contenido=document.createTextNode(t);
inicializarmodelo.appendChild(contenido);
var inicializarcodigo= document.getElementById("codigo");
var codigoproducto=document.createTextNode(c);
inicializarcodigo.appendChild(codigoproducto);
var inicializarcaracteristicas= document.getElementById("texto");
var caracteristicas=document.createTextNode(txt);
inicializarcaracteristicas.appendChild(caracteristicas);
}
var modeloseleccionado;
var medidaseleccionada;
var formapagoseleccionada;
function cambiarvisor(nombreimagen, numeropagina){
var tituloimagen = document.getElementById("titulo");
var textoimagen=document.getElementById("texto");
var cambiarimagen = document.getElementById("imagenid");
switch (numeropagina){
case "1":
switch (nombreimagen){
case "img0":
cambiarimagen.src = ureles[0];
tituloimagen.innerHTML= titulos[0];
codigo.innerHTML= codigos[0];
textoimagen.innerHTML=textos[0];
break;
case "img1":
cambiarimagen.src = ureles[1];
tituloimagen.innerHTML = titulos[1];
codigo.innerHTML= codigos[1];
textoimagen.innerHTML=textos[1];
break;
case "img2":
cambiarimagen.src =ureles[2];
tituloimagen.innerHTML= titulos[2];
codigo.innerHTML=codigos[2];
textoimagen.innerHTML= textos[2];
break;
}
break;
case "2":
switch (nombreimagen){
case "img0":
cambiarimagen.src = ureles[3];
tituloimagen.innerHTML= titulos[3];
codigo.innerHTML=codigos[3];
textoimagen.innerHTML=textos[3];
break;
case "img1":
cambiarimagen.src = ureles[4];
tituloimagen.innerHTML= titulos[4]
codigo.innerHTML=codigos[4];
textoimagen.innerHTML=textos[4];
break;
case "img2":
cambiarimagen.src =ureles[5];
tituloimagen.innerHTML= titulos[5];
codigo.innerHTML=codigos[5];
textoimagen.innerHTML= textos[5];
break;
default:
}
break;
default:
}
}
function cambiarpagina(numeropaginaseleccionado){
switch (numeropaginaseleccionado){
case "1":
var cambiarimagen1 = document.getElementById("img0");
var cambiarimagen2 = document.getElementById("img1");
var cambiarimagen3 = document.getElementById("img2");
cambiarimagen1.src = urelesmall[0];
cambiarimagen2.src = urelesmall[1];
cambiarimagen3.src = urelesmall[2];
numeropagina = "1";
break;
case "2":
var cambiarimagen1 = document.getElementById("img0");
var cambiarimagen2 = document.getElementById("img1");
var cambiarimagen3 = document.getElementById("img2");
cambiarimagen1.src = urelesmall[3];
cambiarimagen2.src = urelesmall[4];
cambiarimagen3.src = urelesmall[5];
numeropagina = "2";
break;
default:
alert ("En construcción!");
}
}
function datos(){
var modelo =document.getElementById("modelo");
alert(modelo.innerHTML);
}
//-->
</script>
</head>
<body onload="inicializar(titulos[0], codigos[0], textos[0], ureles[0]);">
<div id="contenedor">
<div id= "cabecera">
</div>
<div id="visor">
<div class="imgvisor">
<a href="javascript:void(0);"> <!-- Equivle a href="#" -->
<img src="C:\Escuela2011\Imagenes\AdidasKundo.jpg" id="imagenid" onclick="javascript:datos()" />
<span class="vermas">Ver +</span>
<span class="caracteristicasimagen">
<strong id="titulo"> </strong><strong id="codigo"> </strong> </br><!-- Título de la imagen -->
<p id="texto"></p>
</br>
</span>
</a>
</div>
</div>
<div class="individual">
<a href="javascript:void(0);" class= "opacidad" >
<img src= "file:///C:\Escuela2011\Imagenes\AdidasKundoSmall.jpg" class= "individualclase" name="img0" onclick="cambiarvisor('img0', numeropagina);"></td>
</a>
</div>
<div class="individual" style="margin-top: 15px;" >
<a href="javascript:void(0);" class= "opacidad" >
<img src="file:///C:\Escuela2011\Imagenes\AdidasCourtClassicBlancaIISmall.jpg" class= "individualclase" name="img1" onclick="cambiarvisor('img1', numeropagina);"></td>
</a>
</div>
<div class="individual" style="margin-top: 15px;" >
<a href="javascript:void(0);" class= "opacidad" >
<img src="file:///C:\Escuela2011\Imagenes\AdidasSuperStarSmall.jpg" class= "individualclase" name="img2" onclick="cambiarvisor('img2', numeropagina);" ></td>
</a>
</div>
<div class="cambios">
<table summary="paginador">
<tr>
<td width="20" align="center" class="iluminar"><a href="javascript:void(0);" id="1" onclick="javascript:cambiarpagina('1');">1</a></td>
<td width="5" align="center">|</td>
<td width="20" align="center" class="iluminar"><a href="javascript:void(0);" id="2" onclick="javascript:cambiarpagina('2');">2</a></td>
<td width="5" align="center">|</td>
<td width="20" align="center" class="iluminar"><a href="javascript:void(0);" id ="3" onclick="javascript:cambiarpagina('3');">3</a></td>
<td width="5" align="center">|</td>
<td width="20"align="center" class="iluminar"><a href="javascript:void(0);" id ="4" onclick="javascript:cambiarpagina('4');">4</a></td>
</tr>
</table>
</div>
<div class="compras">
<table summary="numeros">
<tr>
<td width="150" align="left">Numeración:</td>
<td width="20" align="center" class="iluminar"><a href="javascript:void(0);">40</a></td>
<td width="5" align="center">|</td>
<td width="20" align="center" class="iluminar"><a href="javascript:void(0);">41</a></td>
<td width="5" align="center">|</td>
<td width="20" align="center" class="iluminar"><a href="javascript:void(0);">42</a></td>
<td width="5" align="center">|</td>
<td width="20"align="center" class="iluminar"><a href="javascript:void(0);">43</a></td>
<td width="5" align="center">|</td>
<td width="20"align="center" class="iluminar"><a href="javascript:void(0);">44</a></td>
<td width="5" align="center">|</td>
<td width="20"align="center" class="iluminar"><a href="javascript:void(0);">45</a></td>
</tr>
</table>
</div>
<div class="compras" width="550">
<table summary="formas de pago" width="550">
<tr>
<td width="145" align="left">Formas de pago:</td>
<td width="25" align="center" class="iluminar"><a href="javascript:void(0);">Credito</a></td>
<td width="5" align="center">|</td>
<td width="25" align="center" class="iluminar"><a href="javascript:void(0);">Debito</a></td>
<td width="5" align="center">|</td>
<td width="30" align="center" class="iluminar"><a href="javascript:void(0);">Transferencia</a></td>
<td width="5" align="center">|</td>
<td width="45" align="center" class="iluminar"><a href="javascript:void(0);">Pago facil</a></td>
<td width="5" align="center">|</td>
<td width="30" align="center" class="iluminar"><a href="javascript:void(0);">Reembolso</a></td>
</tr>
</table>
</div>
<div class="compras" width="380">
<table summary="AceptarCancelar" width="200" style="margin-left:400px">
<tr>
<td width="20"class="iluminar"><a href="javascript:void(0);" ><img src="" name="aceptar"></a></td>
<td width="5" align="center">|</td>
<td width="20" align="center" class="iluminar"><a href="javascript:void(0);"><img src="" name="cancelar" ></a></td>
<td width="5" align="center">|</td>
<td width="20" align="center" class="iluminar"><a href="javascript:void(0);"><img src="" name="carrito" ></a></td>
</tr>
</table>
</div>
</div>
</body>
</html>