Hola ... Buen Día ... Espero y me puedan ayudar con este problema q tengo...
El código siguiente despliega un calendario y tiene opción para seleccionar el mes y año a la izq. Si se posiciona el cursor sobre el calendario una capa q está oculta aparece mostrando datos desglosados de fechas correspondientes al mes. Lo que quisiera me ayudaran es a hacer que si el mes q se muestra cambia, dicha capa también sea otra. Por ej. la capa del ejemplo se llama 8, misma que se mostraría unicamente si el calendario tiene al mes de Agosto, y para septiembre se mostraría la capa 9 y asi sucesivamente...
Por favor , alguien que me pudiera orientar para ésto ?...
Muchas Gracias.
Código:
<html>
<head>
<script language="JavaScript" src="calendario.js">
</script>
<script language="Javascript">
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="hidden";
}
</script>
<style type="text/css">
<!--
A:link {text-decoration: none;}A:visited {text-decoration: none;}
#micalendario {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
border-style: outset;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
}
#micalendario .nombmes { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #0000CC; background-color: #CCCCCC; border-color: black black #0033FF; font-weight: bold; height: 5px; padding-top: 3px; line-height: 15px; border-style: ridge; border-top-width: 0px; border-right-width: 0px; border-bottom-width: thin; border-left-width: 0px}
#micalendario .nombdias {font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #0000CC}
#micalendario .dianormal { font-family: Arial, Helvetica, sans-serif; font-
weight: bold; color: #000099; font-size: 15px}
#micalendario .diafiesta { font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-weight: bold; color: #FF0000}
#micalendario caption { font-size: 18px; font-weight: bold; color: #3300CC; background: #FFFF99; line-height: 70%; padding-top: 4px; clip: rect( ); border-style: outset; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: medium}
-->
</style>
</HEAD>
<BODY BGCOLOR="#FFFF99" TEXT="#990000" >
<p>Seleccione el Mes y Año a Consultar:</p>
<div id="Layer2" style="position: absolute; left: 98px; top: 41px; width: 290px; height: 19px; z-index: 1;">
<form name="form1" method="post" action="" >
<select name="lista" size="1" onChange="vermes(this.parentElement.lista, this.parentElement.lista2.value)">
<option value="1" selected>Enero</option>
<option value="2">Febrero</option>
<option value="3">Marzo</option>
<option value="4">Abril</option>
<option value="5">Mayo</option>
<option value="6">Junio</option>
<option value="7">Julio</option>
<option value="8">Agosto</option>
<option value="9">Septiembre</option>
<option value="10">Octubre</option>
<option value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select></p>
<form name="form2" method="post" action="" >
<select name="lista2" size="1" onChange="vermes(this.parentElement.lista, this.parentElement.lista2.value)">
<option value="2006" selected>2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
</select>
<br>
</div>
<div id="micalendario" style="position:absolute; width:200px; height:auto; z-index:1; left: 326px; top: 61px; overflow: visible" onmouseout="ocultar('8')" onmouseover="mostrar('8')">
</div>
<div id="8" style="position:absolute; left:561px; top:58px; width:458px; height:294px; z-index:1; background-color: #ccff66; layer-background-color: #ccff66; border: 1px none #000000; visibility: hidden;">
<table width="100%" height="292" border="0" cellpadding="2" cellspacing="1">
<tr>
<td align="justify" bgcolor="#ccff66" class="Estilo7">
<p align="center"><em>23 de Agosto</em></p>
<p align="left">18:00 Reunión de Trabajo</p>
<p align="center"><em>24 de Agosto</em></p>
<p align="left">10:00 Desayuno con Empresarios </p>
<p align="left"> </p>
</td>
</tr>
</table>
</div>
<script language="JavaScript">
calendario(8, 2006, true,'micalendario', 'tabla1');
</script>
</BODY>
</html>