Imageens y capas

javihb · #1 (**permalink**) 24/04/2006, 05:28

Hola amigos vereis tengo un problema con unas capas e imagenes mi problema esquew tengo 4 capas y en las 4 hay texto e imagenes, bien , pero el problema viene cuando piko en una de las capas se me quedan las imagenes como ocultas y no me aparecen....a ver si alguien me puede decir algo
Gracias.
Os dejo el código pa que le echeis un vistazo

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css" >
<!--
body {
	border:0px;
	padding: 0px;
	margin:0px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana, ;
	font-size: 0.72em;
	color: #3E647E;
	line-height: 1.4em;
	background-color: #DFE9F2;
}

.azul {
	color: #0077D4;
	text-decoration: none;
}
a:hover.azul  {
	color: #00209F;
	border-bottom: 1px dotted #00209F;
	text-decoration: none;
}

#info00 {
	position: relative;
	/*background-color:#EFF4F9;*/
	width:530px;
	/*--margin-left:0px;--*/
	padding:0px;
	background: url(imagenes/info00med.gif) repeat-y left top;	
}
#pestanas00 {
	position:relative; 
	overflow:auto;
	height: 51px;
}
#pestanas01 {
	position:relative; 
	overflow:auto;
	height: 22px;
}
#pestanas02 {
	position:relative; 
	overflow:auto;
	height: 41px;
}
#info01 {
	/*position:absolute;*/
	padding:10px;
	margin:5px;
	background-color:#FFFFFF;
	text-align:justify;
	border:1px solid #DFE9F2;	
}
#info02 {
	position:absolute;
	padding:10px;
	margin:5px;
	background-color: #FFFFFF;
	text-align:justify;
	visibility: hidden;
	border:1px solid #DFE9F2;
}
#info03 {
	position:absolute;
	padding:10px;
	margin:5px;
	background-color: #FFFFFF;
	text-align:justify;
	visibility: hidden;
	border:1px solid #DFE9F2;
}
#info04 {
	position:absolute;
	padding:10px;
	margin:5px;
	background-color: #FFFFFF;
	text-align:justify;
	visibility: hidden;
	border:1px solid #DFE9F2;
}

#info00 th {
	/*background-color: #C1C1C1;*/
	background: url(imagenes/tablas01.jpg) repeat-x left top;	
}
#info00 td {
	background-color: #FFFFFF;
}

#pestanas00 ul {
	 margin:0px;
	 margin-left:5px;
	 padding:0px;
}
#pestanas00 .li01 {
	float:left;
	text-align:center;
	background-color:#FFFFFF;
	margin:0px;
	margin-right:5px;
	/*margin-top:5px;*/
	padding:2px;
	padding-left:23px;
	padding-right:22px;
	list-style-type: none;
	border:1px solid #DFE9F2;
}

#pestanas01 ul {
	 margin:0px;
	 margin-left:5px;
	 padding:0px;
}
#pestanas01 .li01 {
	float:left;
	text-align:center;
	background-color:#FFFFFF;
	margin:0px;
	margin-right:5px;
	padding:2px;
	padding-left:44px;
	padding-right:43px;
	list-style-type: none;
	border:1px solid #d0e1e4;
}

#pestanas02 ul {
	 margin:0px;
	 margin-left:5px;
	 padding:0px;
}
#pestanas02 .li01 {
	float:left;
	text-align:center;
	background-color:#FFFFFF;
	margin:0px;
	margin-right:5px;
	padding:2px;
	padding-left:46px;
	padding-right:45px;
	list-style-type: none;
	border:1px solid #d0e1e4;
}
-->
</STYLE>
<script language="javascript">
var ie4=(document.all&&navigator.userAgent.indexOf("Opera")==-1);
var ns6=(document.getElementById&&!document.all);
var ope=(navigator.userAgent.indexOf("Opera")!=-1);
var ns4=(document.layers);
var retraso=setTimeout("",100);
var nTemp=0;
var lnx=0;
var lny=0;
function DameObjeto(cid) {
	if (ie4) {
		oobjeto = eval("document.all." + cid);
	} else if (ns6||ope) {
		oobjeto = document.getElementById(cid);
	} else if (ns4) {
		oobjeto = eval("document." + cid);
	} else {
		oobjeto = document.getElementById(cid);
	}
	return oobjeto;
}
function MuestraCapa(cid1) {
   if (ie4||ns6||ope) {
      DameObjeto(cid1).style.visibility="visible";
	  DameObjeto(cid1).style.position="relative";
   } else {
      DameObjeto(cid1).style.visibility="visible";
	  DameObjeto(cid1).style.position="relative";
   }
}
function OcultaCapa(cid1) {
   if (ie4||ns6||ope) {
      DameObjeto(cid1).style.visibility="hidden";
	  DameObjeto(cid1).style.position="absolute";
   } else {
      DameObjeto(cid1).style.visibility="hide";
	  DameObjeto(cid1).style.position="absolute";
   }
}
</script>
</head>
<body>
<div id="info00">
<div class="info00sup"></div>

<div id="pestanas02">
<ul>
<li class="li01"><a href="#pestanas" class="azul" onClick="MuestraCapa('info01'); OcultaCapa('info02');  OcultaCapa('info03'); OcultaCapa('info04');" style="cursor:pointer;">Introducci&oacute;n</a></li>
<li class="li01"><a href="#pestanas" class="azul" onClick="OcultaCapa('info01');  MuestraCapa('info02'); OcultaCapa('info03'); OcultaCapa('info04');" style="cursor:pointer;">Software de gesti&oacute;n de archivos</a></li>
<li class="li01"><a href="#pestanas" class="azul" onClick="OcultaCapa('info01');  OcultaCapa('info02');  MuestraCapa('info03'); OcultaCapa('info04');" style="cursor:pointer;">Cooperaci&oacute;n</a></li>
<li class="li01"><a href="#pestanas" class="azul" onClick="OcultaCapa('info01');  OcultaCapa('info02');  OcultaCapa('info03');  MuestraCapa('info04');" style="cursor:pointer;">Conclusi&oacute;n</a></li>
</ul> 		   
</div>

<div id="info01">
<h2>Capa 1</h2>
<p> Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto .</p>
<img src="imagenes/arsenal-001.jpg"  align="left" border="0"/> 
<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto .</p>
</div>

<div id="info02">
<h2>Capa 2</h2>
<p> Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto .</p>
<img src="imagenes/arsenal-002.jpg"  align="left" border="0"/> 
<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto .</p>
</div>

<div id="info03">
<h2>Capa 3</h2>
<p> Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto .</p>
<img src="imagenes/arsenal-003.jpg"  align="left" border="0"/> 
<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto .</p>
</div>

<div id="info04">
<h2>Capa 4</h2>
<p> Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto .</p>
<img src="imagenes/arsenal-004.jpg"  align="left" border="0"/> 
<p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto .</p>
</div>

<div class="info00inf"></div>
</div>
</body>
</html>

KarlanKas · #2 (**permalink**) 24/04/2006, 06:04

¿Así?

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<STYLE TYPE="text/css" >
<!--
body {
	border:0px;
	padding: 0px;
	margin:0px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif, Tahoma, Verdana, ;
	font-size: 0.72em;
	color: #3E647E;
	line-height: 1.4em;
	background-color: #DFE9F2;
}

.azul {
	color: #0077D4;
	text-decoration: none;
}
a:hover.azul  {
	color: #00209F;
	border-bottom: 1px dotted #00209F;
	text-decoration: none;
}

#info00 {
	position: relative;

	width:530px;
	/*--margin-left:0px;--*/
	padding:0px;
	background: url(imagenes/info00med.gif) repeat-y left top;	
}

}
#pestanas02 {
	position:relative; 
	overflow:auto;
	height: 45px;
}
#info01{
visibility:visible;
}
.info{
	visibility:hidden;
	position:absolute;
	top:45px;
	left:0px;
	padding:10px;
	margin:5px;
	background-color:#FFFFFF;
	text-align:justify;
	border:1px solid #DFE9F2;	
}




#pestanas02 ul {
	 margin:0px;
	 margin-left:5px;
	 padding:0px;
}
#pestanas02 .li01 {
	float:left;
	text-align:center;
	background-color:#FFFFFF;
	margin:0px;
	margin-right:5px;
	padding:2px;
	padding-left:46px;
	padding-right:45px;
	list-style-type: none;
	border:1px solid #d0e1e4;
}
-->
</STYLE>
<script language="javascript">
var aquella="info01";
function MuestraCapa(esta){
document.getElementById(aquella).style.visibility='hidden';
document.getElementById(esta).style.visibility='visible';;
aquella=esta;
}

</script>
</head>
<body>
<div id="info00">


<div id="pestanas02">
<ul>
<li class="li01"><a href="#pestanas" class="azul" onClick="MuestraCapa('info01');" style="cursor:pointer;">Introducci&oacute;n</a></li>
<li class="li01"><a href="#pestanas" class="azul" onClick="MuestraCapa('info02');" style="cursor:pointer;">Software de gesti&oacute;n de archivos</a></li>
<li class="li01"><a href="#pestanas" class="azul" onClick="MuestraCapa('info03');" style="cursor:pointer;">Cooperaci&oacute;n</a></li>
<li class="li01"><a href="#pestanas" class="azul" onClick="MuestraCapa('info04');" style="cursor:pointer;">Conclusi&oacute;n</a></li>
</ul> 		   
</div>

<div class="info"  id="info01">
<h2>Capa 1</h2>
<p> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 .</p>
<img src="imagenes/arsenal-001.jpg"  align="left" border="0"/> 
<p>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 .</p>
</div>

<div class="info" id="info02">
<h2>Capa 2</h2>
<p> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 .</p>
<img src="imagenes/arsenal-002.jpg"  align="left" border="0"/> 
<p>Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 .</p>
</div>

<div class="info" id="info03">
<h2>Capa 3</h2>
<p> Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 .</p>
<img src="imagenes/arsenal-003.jpg"  align="left" border="0"/> 
<p>Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 .</p>
</div>

<div class="info" id="info04">
<h2>Capa 4</h2>
<p> Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 .</p>
<img src="imagenes/arsenal-004.jpg"  align="left" border="0"/> 
<p>Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 .</p>
</div>

</div>
</body>
</html>