ocultar-mostrar capas desde un link externo

alamarcheta · #1 (**permalink**) 23/06/2005, 15:00

Buenas!!

Sus comento: Estoy utilizando el javascript de dreamveaver para mostrar-ocultar capas y mi pregunta es: ¿si desde una página cuando presione un enlace que me lleva a otra, en ese enlace puedo decirle que me muestre u oculte capas en esa página?

No se si me he explicado mu bien

Saludos.

alamarcheta · #2 (**permalink**) 24/06/2005, 02:27

La pregunta de una manera mas clara seria:
¿Puedo pasar parámetros mediante un enlace a una función existente en la página enlazada?

He encontrado este link que responde a esa pregunta. ¿Pero como podria ahora hacerlo para que me mostrara-ocultara las capas?

alamarcheta · #3 (**permalink**) 24/06/2005, 04:13

Este seria el código que he utilizado en la primera página (index.htm):

Código HTML:

<html>
<head>
<style>
body{
	color: Black;
	font-family:tahoma;
	margin-left : 10px;
	margin-right : 10px;
	text-align : justify;
	font-size : 10px;
	background-color : #F4F4FD;
	iframe:none;
}
div.mio{
color : black; text-align : center; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;	background-color : #CCCCFF;
	border-bottom : solid;
	border-top : solid;
	padding-top : 5px;
	padding-bottom : 5px;
}
div.titulo{
color : white; text-align : center; font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;	font-size : 20px;	background : #A1A2FF;
}
</style>
</head>
<body>
<div class="titulo">
PÁGINA NÚMERO 1
</div>
<br>
<div class="mio">
Voy a mandar las variables 'var1' y 'var2' a la página 'index2.html'.<hr style="width:50%">
A través de un <b>ENLACE</b>:<br><a href="index2.html?var1=hola&var2=mundo"><b>Ir a 'java2.htm?var1=hola&var2=mundo'</b></a><hr style="width:50%">

A través de un <b>FORMULARIO</b>:
<form action="capas.htm" method="GET">
  <b>var1: <input type="text" size="15" name="var1"><br>
  <input type="submit" value="Enviar">
</form>
</div>
<br>
<div class="mio"><a href="javascript:window.close()"><b>[[ CERRAR VENTANA ]]</b></a></div>

</body>
</html>

Y este en la segunda página (capas.htm):

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#a{visibility:hidden;position:absolute;top:100px;color:#FF0000}
#b{visibility:hidden;position:absolute;top:150px;color:#666699}
#c{visibility:hidden;position:absolute;top:200px;color:#666600}
#d{visibility:hidden;position:absolute;top:250px;color:#FF66CC}
</style>
<script language="JavaScript" type="text/JavaScript">
function leerGET(){
        var cadGET = location.search.substr(1,location.search.length);
        var arrGET = cadGET.split("&");
        var asocGET = new Array();
        var variable = "";
        var valor = "";
        for(i=0; i< arrGET.length;i++){
          var aux = arrGET[i].split("=");
          variable = aux[0];
          valor = aux[1];
          asocGET[variable] = valor;
        }
        return asocGET;
      }
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
</script>
</head>
<body>
<script>
  var paresVarValor = leerGET();
  for (obj in paresVarValor){
    document.write("'" + obj + "'' vale <b>" + paresVarValor[obj] + "</b><br>");
  }
</script>
<a href="#" title="1" onClick="MM_showHideLayers('a','','show','b','','hide','c','','hide','d','','hide')">link 1</a>
<a href="#" title="2" onClick="MM_showHideLayers('a','','hide','b','','show','c','','hide','d','','hide')">link 2</a>
<a href="#" title="3" onClick="MM_showHideLayers('a','','hide','b','','hide','c','','show','d','','hide')">link 3</a>
<a href="#" title="4" onClick="MM_showHideLayers('a','','hide','b','','hide','c','','hide','d','','show')">link 4</a>
<div id="a">prueba 1</div>
<div id="b">prueba 2</div>
<div id="c">prueba 3</div>
<div id="d">prueba 4</div>
</body>
</html>

¿Como podría hacer para que pinchando en el enlace me mostrara u ocultara la capa o capas que yo quisiera?

alamarcheta · #4 (**permalink**) 24/06/2005, 09:46

echarme una mano, que no controlo mucho de javascript

alamarcheta · #5 (**permalink**) 26/06/2005, 08:04

ayuda!

Jall Malatesta · #6 (**permalink**) 07/07/2005, 10:20

Aquí te presento una posible soución. Hay dos páginas: index.html y capas.html.
En index.html hay enlaces a capas.html de tal manera que en esta se muestra/n la/s capa/s que se pasa/n como parámetro/s. Este es el código de index.html:

Código:

<html>
  <head>
  </head>
  <body>
<div align="center">
      <br>
      <a href="capas.html?var1=a">
        <b>ver 'capa 1'</b></a>
 <br>
      <a href="capas.html?var1=b">
        <b>ver 'capa 2'</b></a>
 <br>
      <a href="capas.html?var1=c">
        <b>ver 'capa 3'</b></a>
 <br>
      <a href="capas.html?var1=d">
        <b>ver 'capa 4'</b></a>
 <br>
      <a href="capas.html?var1=c&var2=d">
        <b>ver 'capa 3 y 4'</b></a>
</div>
  </body>
</html>

Si observas la forma de los enlaces estos indican cuál capa (a,b,c ó d) tiene que verse en la página capas.html. El código de esta es:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>
      Documento sin t&iacute;tulo
    </title>
    <style type="text/css">
      #a{visibility:hidden;width:50%;margin-top:20px;top:100px;color:#FF0000;border:1px solid #FF0000}
      #b{visibility:hidden;width:50%;margin-top:20px;top:150px;color:#666699;border:1px solid #666699}
      #c{visibility:hidden;width:50%;margin-top:20px;top:200px;color:#666600;border:1px solid #666600}
      #d{visibility:hidden;width:50%;margin-top:20px;top:250px;color:#FF66CC;border:1px solid #FF66CC}
    </style>

<script language="JavaScript" type="text/JavaScript">
function leerGET(){ 
var cadGET = location.search.substr(1,location.search.length); 
var arrGET = cadGET.split("&"); 
var asocGET = new Array(); var variable = ""; 
var valor = ""; 
for(i=0; i<arrGET.length; i++){
var aux = arrGET[i].split("=");
variable = aux[0]; 
valor = aux[1]; 
asocGET[variable] = valor; 
} 
return asocGET; 
} 

function mostrarCapa(){
var paresVarValor = leerGET();
for (obj in paresVarValor)
{
var variable = paresVarValor[obj];
document.getElementById(variable).style.visibility = 'visible';
}
}

function modificarVisibilidad(capa){
 with (document.getElementById(capa).style){
  (visibility == "visible")? visibility = "hidden":visibility = "visible";
 }
}
 </script>
  </head>
  <body onload="mostrarCapa()">
    <div align="center">
    <a href="javascript:void(0)" title="1" onClick="modificarVisibilidad('a')">Modificar Visibilidad de CAPA 1</a>
    <a href="javascript:void(0)" title="1" onClick="modificarVisibilidad('b')">Modificar Visibilidad de CAPA 2</a>
    <a href="javascript:void(0)" title="1" onClick="modificarVisibilidad('c')">Modificar Visibilidad de CAPA 3</a>
    <a href="javascript:void(0)" title="1" onClick="modificarVisibilidad('d')">Modificar Visibilidad de CAPA 4</a>
    <div id="a">
      capa 1
    </div>
    <div id="b">
      capa 2
    </div>
    <div id="c">
      capa 3
    </div>
    <div id="d">
      capa 4
    </div>
    </div>
  </body>
</html>

Bien, como puedes ver he pasado un poco del Dreamweaver (que Dios me perdone la insolencia). He utilizado la función leerGET() para capturar las variables del GET. He utilizado la función mostrarCapa() para, una vez cargada la página (onload) mostrar la capa devuelta en la función anterior. Y finalmente, uso la función modificarVisibilidad(capa) para manipular la visibilidad/invisibilidad de las capas.

Espero que esto resuelva tu problema. Si hay algun problema lo comentas.

Gracias por usar mi función leerGet().

salu2

alamarcheta · #7 (**permalink**) 08/07/2005, 01:53

Voy a probarlo Jall Malatesta.
Muchas gracias por responder

alamarcheta · #8 (**permalink**) 08/07/2005, 02:54

Va perfecto

Muchas gracias de nuevo y saludos

Jall Malatesta · #9 (**permalink**) 14/07/2005, 14:42

aquí se puede hacer la demo del script:

http://personal-de-jall.myazor.info/...asar_datos.php

salu2