problema al mostrar y ocultar una capa <div> - Foros del Web

Iniciar Sesión

Estas en el tema de problema al mostrar y ocultar una capa <div> en el foro de Javascript en Foros del Web. Hola amig@s. Tengo un problema con un código que cree para ocultar y mostrar una capa <div>. Lo que sucede que en el internet explorer ...

#1 (permalink)

Antiguo

03/08/2008, 05:57

Fecha de Ingreso: junio-2008

Mensajes: 250

Antigüedad: 16 años, 7 meses

Puntos: 1

problema al mostrar y ocultar una capa <div>

Hola amig@s. Tengo un problema con un código que cree para ocultar y mostrar una capa <div>. Lo que sucede que en el internet explorer funciona perfectamente pero lo abro con el firefox y no funciona. Lo que tiene que hacer esta función es que cuando pulso un botón o imagen lo que debe hacer es mostrar la capa y culdo pulse el botón cerrar la cierre. El código es el siguiente

Cita:

<script type="text/javascript">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="res/css/xl.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function cambiaCapa (nombre)
{
if (nombre=="ocultar")
{
capa1.className = "oculto";
} else
{
capa1.className = "visible";
}
}

function cambiaCapa2 (nombre)
{
if (nombre=="ocultar")
{
capa2.className = "oculto";
} else
{
capa2.className = "visible";
}
}

function cambiaCapa4 (nombre)
{
if (nombre=="ocultar")
{
capa4.className = "oculto";
} else
{
capa4.className = "visible";
}
}
</script>

</head>

<body Scroll="no">
<form id="form1" runat="server">
<div style="position:absolute; left:0px; top:0px">
<img src="res/img/FondoJunior.jpg">
</div>
<div style="position:absolute; left:436px; top:379px">
<img src="res/img/TablaTarif.JPG" />
</div>
<div style="position:absolute; left:880px; top: 4px">
<img src="res/img/LogoXL.jpg"/>
</div>
<div class="texto" style="position: absolute; left:480px; top:90px;">
Alta e información: 900 85 85 85 o en agencia Marsans
</div>

<div style="position:absolute; left:865px; top:135px;">
<a onclick="cambiaCapa(this.name)" name="ver"><img alt="" src="res/img/Boton_Segur.jpg" /></a>
</div>

<div class="textoPeq" style="position:absolute; left:820px; top:170px; width:150px" >
Tu hijo podrá hablar cuando lo necesite ...
</div>
<div style="position:absolute; left:865px; top: 215px; z-index:2">
<a onclick="cambiaCapa2(this.name)" name="ver"><img src="res/img/Boton_Liber.jpg"/></a>
</div>
<div class = "textoPeq" style="position:absolute; left:850px; top:250px; width:120px">
también con quien él desee y ...
</div>
<div style="position:absolute; left:865px; top:295px; z-index:4">
<a onclick="cambiaCapa4(this.name)" name="ver"><img src="res/img/Boton_Ahorro.jpg"/></a>
</div>
<div class ="textoPeq" style="position:absolute; left:850px; top:330px; width:120px">
tu tienes el control del gasto.
</div>
<div class="texto" style="position: absolute; left:460px; top:500px; width:460px">
Con XL JUNIOR tu hijo podrá hablar con hasta diez números que tu elijas sin límite. El coste irá directamente a tu cuenta bancaria, pero además tendrá libertad para llamar al resto de números en prepago.
</div>
<div class="textoMay" style="position: absolute; left:460px; top:560px; width:460px">
GANAS EN SEGURIDAD, LIBERTAD Y AHORRO.
</div>
<div class="textTar" style="position:absolute; left:420px; top:460px">
0,14 IVA Incl.
</div>
<div class="textTar" style="position: absolute; left:529px; top:460px;">
0,17 IVA Incl.
</div>
<div class="textTar" style="position: absolute; left:627px; top:460px;">
0,14 IVA Incl.
</div>
<div class="textTar" style="position: absolute; left:724px; top:460px;">
0,58 IVA Incl.
</div>
<div class="textTar" style="position: absolute; left:824px; top:460px;">
0,58 IVA Incl.
</div>

<div id="capa3" style="position: absolute; left:424px; top:127px; z-index:0;">

<embed src="res/img/XLJunior.swf" width="299px" height="209px" >

</embed>
</div>

<div class="textTar" style="position: absolute; left:450px; top:360px;">
TARIFAS NACIONALES. PENÍNSULA Y BALEARES. Precios €
</div>
<div style="position: absolute; left:885px; top:560px">
<a href=""><img src="res/img/Boton_Volver.jpg" /></a>
</div>

<div style="position:absolute; top:170px; left:800px; background:white; height:200px; width:200px; border:1; border-color:blue; z-index:15" id="capa1" class="oculto">
<div style="position:absolute;top:3px; right:5px;">
<button id="opRadioOcultar" name="ocultar" onclick="cambiaCapa(this.name)" style="height:21px; width:20px"><img src="res/img/cerrar.jpg" id="IMG1" onclick="return IMG1_onclick()"></button>
</div>
<div style="position:absolute; width:160px; top:30px; left:15px" class="textonota">
SEGURIDAD PARA ÉL O ELLA. Quien tú has elegido podrá hablar siempre con los números que tú has elegido. Tú le brindas esta posibilidad porque el cargo va a tú cuenta bancaria.
</div>
</div>
<div style="position:absolute; top:250px; left:800px; background:white; height:130px; width:200px; z-index:15" id="capa2" class="oculto">
<div style="position:absolute;top:3px; right:5px;">
<button id="Button1" name="ocultar" onclick="cambiaCapa2(this.name)" style="height:21px; width:20px"><img src="res/img/cerrar.jpg" id="IMG2"></button>
</div>
<div style="position:absolute; width:160px; top:30px; left:15px" class="textonota">
LIBERTAD para que la persona que tú has elegido llame a quien desee sin límite (mediante tarjeta de prepago).
</div>
</div>

<div style="position:absolute; top:100px; left:800px; background:white; height:200px; width:200px; z-index:15" id="capa4" class="oculto">
<div style="position:absolute;top:3px; right:5px;">
<button id="Button2" name="ocultar" onclick="cambiaCapa4(this.name)" style="height:21px; width:20px"><img src="res/img/cerrar.jpg" id="IMG3"></button>
</div>
<div style="position:absolute; width:160px; top:30px; left:15px" class="textonota">
AHORRO. Tú tienes el control del gasto, porque eliges hasta 10 números a los cuales se podrá comunicar quién tú has elegido; con un consumo mínimo mensual de 9 euros y un contrato de permanencia de 18 meses.
</div>
</div>

</div>
</form>

</body>
</html>

Otra cosa cree una función para que cada botón mostrara una capa diferente(con un contenido de texto distinto) y quisiera que esto lo hiciera solo con una función no con tres una para cada capa(o botón) y de este modo que necesite menos lienas de código. A ver si me podeis explicar como puedo hacer esto y solucionar el problema de los dos navegadores. Muchas gracias a tod@s.
Un saludo

#2 (permalink)

Antiguo

04/08/2008, 10:52

Moderador

Fecha de Ingreso: abril-2005

Ubicación: In this planet

Mensajes: 15.720

Antigüedad: 19 años, 8 meses

Puntos: 839

Exclamación

Respuesta: problema al mostrar y ocultar una capa <div>

Para empezar, ¿podrías poner el contenido del archivo *.css?.
Para unificar las funciones, puedes recibir como parámetro el id del objeto y manejarlo con getElementById.

__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.

#3 (permalink)

Antiguo

06/08/2008, 02:29

Fecha de Ingreso: junio-2008

Mensajes: 250

Antigüedad: 16 años, 7 meses

Puntos: 1

Respuesta: problema al mostrar y ocultar una capa <div>

Hola a [email protected] gracias por la ayuda, pero ya he conseguido que funcionara correctamante.
El contenido de la CSS es

Cita:

.visible {display:block;}
.oculto {display:none;}

Cita:

<script type="text/javascript">
// Con esta funcion lo que hacemos es que la capa de seguridad, libertad y Ahorro se haga visible o no
function cambiaCapa (nombre, action)
{
var oLayer = document.getElementById(nombre);

if (action == "ocultar")
{
oLayer.className = "oculto";
}
else
{
oLayer.className = "visible";
}
}
</script>
<html>
</head>
<body>
<form id="form1" runat="server">
<div style="position:absolute; left:865px; top:135px; cursor:pointer">
<a onclick="cambiaCapa('capa1','ver')"><img alt="" src="res/img/Boton_Segur.jpg" /></a>
</div>
<div style="position:absolute; top:170px; left:800px; background:white; height:210px; width:200px; border:1; border-color:blue; z-index:15" id="capa1" class="oculto">
<div style="position:absolute;top:3px; right:5px">
<button id="opRadioOcultar" name="ocultar" onclick="cambiaCapa('capa1','ocultar');" style="height:21px; width:20px; cursor:pointer; float:left"><img src="res/img/cerrar.jpg" id="IMG1" style="position:absolute; top:3px; left:3px"></button>
</div>
<div style="position:absolute; width:160px; top:30px; left:15px" class="textonota">
SEGURIDAD PARA ÉL O ELLA. Quien tú has elegido podrá hablar siempre con los números que tú has elegido. Tú le brindas esta posibilidad porque el cargo va a tú cuenta bancaria.
</div>
</div>
</form>
</body>
</html>

Un saludo para tod@s

#4 (permalink)

Antiguo

06/08/2008, 03:00

Fecha de Ingreso: octubre-2006

Ubicación: San Francisco, CA

Mensajes: 2.168

Antigüedad: 18 años, 2 meses

Puntos: 122

Respuesta: problema al mostrar y ocultar una capa <div>

Por que no editas tu post y pones los codigos en etiquetas code o php o html segun corresponda para que sea mas facil de leer por que asi como esta me pierdo...

__________________
twitter: @imbuzu

¿Tienes una mejor respuesta a este tema? ¿Quiéres hacerle una pregunta a nuestra comunidad y sus expertos? Registrate

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 02:08.