Hola!
Estoy intentando hacer que al ponerme en un enlace1 se muestre una capa de informacion. sobre el 2 otra y sobre el 3 otra capa.
He buscado y he probado varias cosas pero no sale.
Este es el codigo que he puesto de html:
<html>
<head>
<title>titulo</title>
<link rel="stylesheet" type="text/css" href="implika2010.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
var capa
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) {
capa1 =document.descripcion1
capa2 =document.descripcion2
capa3 =document.descripcion3
}
if (ie4) {
capa1 =descripcion1
capa2 =descripcion2
capa3 =descripcion3
}
}
function muestra(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function oculta(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
</script>
</head>
<body bgcolor="#ccccff" onLoad="init()">
<div id="contenedora">
<div id="titulo"><img src="implititulo.jpg" name="implika" id="implika"></div>
<div id="centrada">
<div id="capaenlcae">
<table class="tableclase">
<tr>
<td width="15%" height="39"><img src="cuadrado2.gif" width="99" height="35"></td>
<td><a href="http://foro.php" onMouseOver="muestra(capa1)" onMouseOut="oculta(capa1)">FORO</a>
</td>
</tr>
<tr>
<td><img src="cuadrado.gif" width="99" height="35"></td>
<td width="84%"><a href="http://encuesta.php" onMouseOver="muestra(capa2)" onMouseOut="oculta(capa2)">ENCUESTA</a></td>
</tr>
<tr>
<td><img src="cuadrado.gif" width="99" height="35"></td>
<td width="89%"><a href="http://descargas.php"onMouseOver="muestra(capa3)" onMouseOut="oculta(capa3)" >DESCARGAS</a></td>
</tr>
</table>
<div id="descripcion1">esta es la capa para foro</div>
<div id="descripcion2">esta es la capa encuesta</div>
<div id="descripcion3">esta es la capa descargas</div>
</div>
</div>
</body>
</html>
Y en css he hecho lo siguiente:
div#Contenedora
{ width:100%; text-align:center; }
div#titulo
{width:400px;margin top:50px; margin bottom:30px;
}
/*caja centrada*/
div#centrada
{width:400px; top:0px;
border:2px solid #000033}
}
texto p{
font: arial, verdana, sans;
font size:12pt;
font color:#000033;
text-decoration:none;
}
/*capaenlaces*/
div#capaenlace{
width:100%;
heigth:100%;
}
/*tabla en caja*/
.tableclase{
width:100%;
heigth:100%;
margin right:20%;
margin left:20%;
top:10%;
bottom:20%;
}
/*capainfo enlaces*/
#descripcion1, #descripcion2, #descripcion3{
width:20%;
heigth:20%;
margin right:20%;
margin left:20%;
top:10%;
bottom:0;
display:none;
float:rigth;
}
/*enlaces*/
a:link{
font: arial, verdana, sans;
font size:12pt;
font color:#000033;
text-decoration:none;
font weight:lighter;
}
a:hover{
font: arial, verdana,sans;
font size:12pt;
font color:#000033;
text-decoration:underline;
font weight:lighter;
}
a:active{
font: arial, verdana, sans;
font size:12pt;
font color:#000033;
text-decoration:none;
font weight:lighter;
}
a:visited{
font: arial, verdana, sans;
font size:12pt;
font color:#000033;
text-decoration:none;
font weight:lighter;
}
La verdad,a saber lo que estoy poniendo, pero no se como arreglarlo,
gracias de antemano
