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>