Foros del Web » Programando para Internet » Javascript »

problema con mostrar / ocultar capas

Estas en el tema de problema con mostrar / ocultar capas en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/08/2006, 14:47
Avatar de kill100  
Fecha de Ingreso: agosto-2006
Mensajes: 2
Antigüedad: 17 años, 8 meses
Puntos: 0
Pregunta problema con mostrar / ocultar capas

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&oacute;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">&nbsp;</p>
	    </td>
	</tr>
</table>
</div>

<script language="JavaScript">
calendario(8, 2006, true,'micalendario', 'tabla1');
</script>
</BODY>
</html>
  #2 (permalink)  
Antiguo 24/08/2006, 06:09
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Prueba acambiar la etiqueta de apertura de la capa micalendario por esto:

Código:
<div id="micalendario" 
style="position:absolute; width:200px; height:auto; z-index:1; left: 326px; top: 61px; overflow: visible" 
onmouseout="ocultar(document.forms['form1']['lista'].options.selectedIndex+1)"
 onmouseover="mostrar(document.forms['form1']['lista'].options.selectedIndex+1)">
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
  #3 (permalink)  
Antiguo 24/08/2006, 15:17
Avatar de kill100  
Fecha de Ingreso: agosto-2006
Mensajes: 2
Antigüedad: 17 años, 8 meses
Puntos: 0
De acuerdo perfecto

funcionó a la perfección... MUCHAS GRACIAS... KarlanKas... U made my day!...

  #4 (permalink)  
Antiguo 25/08/2006, 01:00
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Vaya!

Me alegro de que te funcionara!

Un saludo!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:25.