hola compañeros desarrolladores, les molesto una vez mas con este problema que ya me rompio la cabeza y no encuentro la solucion.
estoy haciendo un slider tengo las miniaturas arriba y cuando ponen el mouse sobre una miniatura se pone en grande la imagen en el float central, en el izquierdo se pone una explicacion, y en el derecho quiero poner otra explicacion, pero no me sale nada en el derecho e incluso me da un pequeño salto, les pongo el desarrollo junto con el archivo css. este es solo un ejemplo ya se que las imagenes necesitan retoque, y que vayan mas centradas y mas imagenes, pero lo que me interesa mas que nada es que ahorita funcione.
<!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>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script language="JavaScript1.2">
<!--
function seleccion(imagen) {
var imagen1="imagenes/"+imagen+".jpg";
document.images.centro.src = imagen1;
var descripcion="";
var descripcion1="";
if (imagen==="1"){
descripcion="Esta es una aguila muy bonita";
descripcion1="Aguila, animal plumifero muy peligrosa para los ratones hay que tener cuidado con ellas";
}
if (imagen==="2"){
descripcion="La bandera de Estados Unidos de America";
descripcion1="Al parecer esta en un cementerio";
}
if (imagen==="3"){
descripcion="La casita de la pradera de los Engells";
descripcion1="Un paisaje muy bonito";
}
if (imagen==="4"){
descripcion="Una puesta de sol muy espectacular";
descripcion1="Para los que estan enamorados";
}
if (imagen==="5"){
descripcion="Un cisne, uno de los animales mas elegantes que hay";
descripcion1="Otro animal plumifero, pero este es muy pacifico";
}
if (imagen==="6"){
descripcion="Nada mejor que una linda playa";
descripcion1="Puede ser tampico o varacruz";
}
if (imagen==="7"){
descripcion="Una carretera, nada espectacular";
descripcion1="Para disfrutar unas buenas vacaciones";
}
document.getElementById("explica").innerHTML = descripcion;
document.getElementById("explica1").innerHTML = descripcion1;
}
-->
</script>
</head>
<body bgcolor="#666666">
<div id="miniimagen">
<h2 align="center">Pon el mouse en la imagen para agrandar Slider 1</h2>
<img src="imagenes/1.jpg" title="Aguila" width="100" height="80" class="bordominiimagen" onmouseover="seleccion('1')"/>
<img src="imagenes/2.jpg" title="Bandera" width="100" height="80" class="bordominiimagen" onmouseover="seleccion('2')"/>
<img src="imagenes/3.jpg" title="Casa" width="100" height="80" class="bordominiimagen" onmouseover="seleccion('3')"/>
<img src="imagenes/4.jpg" title="Sol" width="100" height="80" class="bordominiimagen" onmouseover="seleccion('4')"/>
<img src="imagenes/5.jpg" title="Cisne" width="100" height="80" class="bordominiimagen" onmouseover="seleccion('5')"/>
<img src="imagenes/6.jpg" title="Playa" width="100" height="80" class="bordominiimagen" onmouseover="seleccion('6')"/>
<img src="imagenes/7.jpg" title="Carretera" width="100" height="80" class="bordominiimagen" onmouseover="seleccion('7')"/>
</div>
<br />
<div id="izquierdas1"><div id="explica" class="cuerpo">
Esta es una aguila muy bonita
</div></div>
<div id="centros1">
<img src="imagenes/1.jpg" id="centro" width="300" height="240" class="bordoimagen"/>
</div>
<div id="derechas1"><div id="explica" class="cuerpo">
Aguila, animal plumifero muy peligrosa para los ratones hay que tener cuidado con ellas
</div></div>
</body>
</html>
y la hoja de estilo:
#miniimagen{
float: left;
background:#333333;
padding-top:.01em;
width: 100%;
height:10em;
border-color:#000000;
border-style:solid;
}
.bordominiimagen{
border-color:#FF0000;
border-style:solid;
}
.bordoimagen{
border-color:#0000FF;
border-style:solid;
}
.cuerpo{
font-family:Helvetica, sans-serif, Arial;
font-size: 1em;
font-weight:700;
color:#0000FF;
}
#izquierdas1 {
float: left;
width: 25%;
height:16em;
background:#FF0000;
}
#centros1 {
float: left;
width: 50%;
height:16em;
background:#00FF00;
}
#derechas1 {
float: left;
width: 25%;
height:16em;
background:#0000FF;
}
lo que no me funciona es esto:
<div id="derechas1"><div id="explica" class="cuerpo">
Aguila, animal plumifero muy peligrosa para los ratones hay que tener cuidado con ellas
</div></div>
al igual si ven errores o mejoras para desarrollar mejor, les agradeceria me lo dijeran.
de antemano mil gracias y TENGAN CUIDADO!!! (esto lo pongo porque a un querido amigo lo acaban de atropellar, ANIMO ASTUTO!!! estamos contigo)