Foros del Web » Programando para Internet » Javascript »

Ocultando capas.

 Estas en el tema de Ocultando capas. en el foro de Javascript en Foros del Web. Hola amigos: Saben que estoy trabajando con capas, encontre un ejemplo, lo modifique, pero no he podido agregar mas sectores es decir del sector 3 ...
  #1 (permalink)  
Antiguo 04/07/2004, 15:11
 
Fecha de Ingreso: abril-2003
Ubicación: 127.0.0.1
Mensajes: 359
Antigüedad: 21 años, 8 meses
Puntos: 0
Ocultando capas.
Hola amigos:

Saben que estoy trabajando con capas, encontre un ejemplo, lo modifique, pero no he podido agregar mas sectores es decir del sector 3 a al sector 9, este es el codigo y al final del mensaje esta el link de lo que llevo.

Código PHP:
<HTML><HEAD><TITLE>Ejemplo</TITLE>

<META http-equiv=Content-Style-Type content=text/css>
<LINK href="imagenes/menu_sectores/hmv.css" type=text/css rel=stylesheet>

</HEAD>
<BODY>
<script language="JavaScript1.2" src="js/capas.js"></script>
<TR>
<TD valign="top"><p>&nbsp;</p>
    <table width="92%" border="0">
      <tr>
        <td><TABLE cellSpacing=0 cellPadding=0 width="92%" border=0>
            <TBODY>
              <TR> 
                <TD height="100%"> <LINK 
                        href="imagenes/menu_sectores/hmvGenre4.css" 
                        type=text/css rel=stylesheet> 
<SCRIPT language=JavaScript>

</SCRIPT> <DIV id=divReviews style="DISPLAY: inline"> 
                    <TABLE cellSpacing=0 cellPadding=0 width="100%" 
border=0>
                      <TBODY>
                        <TR> 
                          <TD align=middle><IMG height=6 
                              src="imagenes/menu_sectores/transparent.gif" 
                              width=1></TD>
                        </TR>
                        <TR> 
                          <TD><img height=21 
                              src="imagenes/menu_sectores/tab/sec1_v.png" 
                              width=102 border=0><A 
                              href="javascript:displayTryThese();"><IMG 
                              height=21 
                              src="imagenes/menu_sectores/tab/sec2_g.png" 
                              width=102 border=0></A></TD>
                        </TR>
                        <TR> 
                          <TD class=sNavl1 height=11> <P>&nbsp;</P></TD>
                        </TR>
                      </TBODY>
                    </TABLE>
                    <TABLE class=sNavl3 cellSpacing=0 cellPadding=0 
                        width="100%" border=0>
                      <TBODY>
                        <TR> 
                          <TD class=whiteCell vAlign=top><IMG height=1 
                              src="imagenes/menu_sectores/transparent.gif" 
                              width=1></TD>
                        </TR>
                        <TR> 
                          <TD vAlign=center align=middle width="100%" 
                            height=200> <P class=corp14Bold>Sector 1</P></TD>
                        </TR>
                      </TBODY>
                    </TABLE>
                  </DIV>
                  <DIV id=divTryThese style="DISPLAY: none"> 
                <TABLE cellSpacing=0 cellPadding=0 width="100%" 
border=0>
                      <TBODY>
                        <TR> 
                          <TD align=middle><IMG height=6 
                              src="imagenes/menu_sectores/transparent.gif" 
                              width=1></TD>
                        </TR>
                        <TR> 
                          <TD><a href="javascript:displayReviews();"><img height=21 
                              src="imagenes/menu_sectores/tab/sec1_g.png" 
                              width=102 border=0></a><A 
                              href="javascript:displayTryThese();"><IMG 
                              height=21 
                              src="imagenes/menu_sectores/tab/sec2_v.png" 
                              width=102 border=0></A></TD>
                        </TR>
                        <TR> 
                          <TD class=sNavl1 height=11> <P>&nbsp;</P></TD>
                        </TR>
                      </TBODY>
                    </TABLE>
                    <TABLE class=sNavl3 cellSpacing=0 cellPadding=0 
                        width="100%" border=0>
                      <TBODY>
                        <TR> 
                          <TD class=whiteCell vAlign=top><IMG height=1 
                              src="imagenes/menu_sectores/transparent.gif" 
                              width=1></TD>
                        </TR>
                        <TR> 
                          <TD vAlign=center align=middle width="100%" 
                            height=200> <P class=corp14Bold>Sector 2</P></TD>
                        </TR>
                      </TBODY>
                    </TABLE>
                  </DIV>
                  <TABLE cellSpacing=0 cellPadding=0 width="100%" 
border=0>
                    <TBODY>
                      <TR> 
                        <TD class=corp> <DIV id=divReviews2 style="DISPLAY:  none"> 
                            <TABLE class=sNavl3 cellSpacing=0 cellPadding=0 
                        width="100%" border=0>
                      <TBODY>
                        <TR> 
                          <TD class=whiteCell vAlign=top><IMG height=1 
                              src="imagenes/menu_sectores/transparent.gif" 
                              width=1></TD>
                        </TR>
                        <TR> 
                          <TD></TD>
                        </TR>
                      </TBODY>
                    </TABLE>
                  </DIV></TD>
                      </TR>
                      <TR>
                        <TD class=corp>&nbsp;</TD>
                      </TR>
                      <TR> 
                        <TD class=corp vAlign=bottom align=middle> <P>&nbsp;</P></TD>
                      </TR>
                    </TBODY>
                  </TABLE></TD>
              </TR>
            </TBODY>
          </TABLE></td>
      </tr>
    </table>
    <p>&nbsp;</p></TD>
</TR>
</BODY></HTML> 
La consulta es como modificaar el codigo para ingresar mas sectores????
Vean este es el ejemplo AQUI
__________________
Practicando se Aprede
:-) :-)
  #2 (permalink)  
Antiguo 05/07/2004, 01:30
 
Fecha de Ingreso: mayo-2004
Mensajes: 75
Antigüedad: 20 años, 7 meses
Puntos: 2
Bueno, lo que tienes que cambiar para poder poner mas capas es la funcion javaScript a la que llamas cuando pulsas sobre el nombre del sector, ahora solamente llamas a dos funciones, la que te muestra la capa del sector1 y la que muestra la capa del sector2, yo he sustituido eso por una unica funcion que oculta todas las capas de sectores que tengas y muestra solamente la capa que esta en la posicion que le pasas como parametro:
Código: 
 
function mostrarCapa(numero){
		if( navigator.appName == "Netscape" ) {
			//No tengo muy claro como se hace lo de las capas en Netscape
		}
		else {
			var sectores = document.getElementsByName("sector");
			//ocultamos todas las capas de los sectores
			for(var i=0; i<sectores.length; i++){
				sectores[i].style.display="none";
			}
			//hacemos visible el sector que me indican por parametro
			sectores[numero].style.display="inline";
		}	
	}
Dentro del codigo de la pagina tienes que modificar un poco las capas de los sectores

el id de todas las capas de los sectores tiene que ser "sector".
Solamente la capa que quieres que se muestre al principio tiene que tener el style="DISPLAY: inline" el resto style="DISPLAY: none"

Este es el codigo de tienen la capa de sector, repitelo tantas veces como sectores quieras, modificar el contenido de cada sector, y la imagen que indica en que sector estas:

<DIV id="sector" style="DISPLAY: inline">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=middle><IMG height=6
src="sectores_archivos/transparent.gif" width=1></TD></TR>
<TR>
<TD>
<!-- Enlaces a los diferentes sectores uno por cada sector que tengas
la imagen de capa seleccionada dependera que en que capa estes
-->
<A href="javascript:mostrarCapa(0);">
<IMG height=21 src="sectores_archivos/sec1_v.png" width=102 border=0></A>
<A
href="javascript:mostrarCapa(1);"><IMG height=21
src="sectores_archivos/sec2_g.png" width=102
border=0></A> <!-- Si quieres mas solamente tienes que anyadir mas enlaces con la imagen de titulo,
teniendo en cuenta que el mostrarCapa tiene que tener 2, 3 sucesivamente-->
</TD>
</TR>
<!-- Aqui va el contenido de la capa actual -->
<TR>
<TD class=sNavl1 height=11>
<P>&nbsp;</P></TD></TR></TBODY></TABLE>
<TABLE class=sNavl3 cellSpacing=0 cellPadding=0 width="100%"
border=0>
<TBODY>
<TR>
<TD class=whiteCell vAlign=top><IMG height=1
src="sectores_archivos/transparent.gif" width=1></TD></TR>
<TR>
<TD vAlign=center align=middle width="100%" height=200>
<P class=corp14Bold>Sector 1</P>
</TD>
</TR></TBODY></TABLE>
</DIV>

Acuerdate que en todas las capas tiene que haber tantos enlaces como sectores tienes, y que las imagenes que
indican el nombre del sector solamente tiene que haber una que sea la de sector seleccionado (la del sector actual).

Ten en cuenta que el codigo que te he puesto en la funcion de JavaScript es para Internet Explorer, no se como se tendria que poner para que funcione en Netscape, no lo tengo instalado para poder probarlo.
  #3 (permalink)  
Antiguo 05/07/2004, 10:03
 
Fecha de Ingreso: abril-2003
Ubicación: 127.0.0.1
Mensajes: 359
Antigüedad: 21 años, 8 meses
Puntos: 0
Sonrisa
gracias amigo.... te agradesco tu ayuda

funciiona correctamente
__________________
Practicando se Aprede
:-) :-)
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:12.