JavaScript - Superposición de capas

   
Vista:

Superposición de capas

Publicado por joss (1 intervención) el 17/11/2009 19:59:41
Estoy haciendo una pequeña web y en una de las páginas necesito que, al hacer click sobre un botón, aparezcan dos capas, con una imagen cada una, superpuestas, es decir, de forma que solo se visualice la última capa llamada, y la primera quede escondida detrás. He utilizado la propiedad z-index para posicionar las capas en "profundidad" y un script de java para llamar las capas (showLayerNumber()) al hacer click sobre el botón (que de momento es un texto simple). El problema es que, al presionar el botón aparecen una detrás de la otra y en el orden correcto, pero al cabo de unos segundos estas capas intercambian solas sus posiciones, de forma que la que estaba detrás pasa a ponerse delante, y luego vuelve a su posición inicial. Este intercambio (que a veces es un "parpadeo" y otras veces dura unos segundos) se va repitiendo indefinidamente cada pocos segundos y sin haber tocado nada más que el botón la primera vez. He estado estudiando el código pero mis conocimientos en programación aun son reducidos.

¿Alguien sabría como solucionarlo?

Otro problema que tengo es que, cada una de las imágenes que hay en esas mismas capas tiene un enlace con la función de esconder la capa a la que pertenece (hideLayerNumber()), una vez se han escondido ambas capas, al hacer clic en el botón, no aparecen de nuevo.

¿Qué podría hacer para que se pudieran esconder y volver mostrar varias veces?


Aquí dejo el código básico completo:

<html>
<head>

<SCRIPT LANGUAGE="JavaScript"> //Define global variables

var layerNumShowing=1;


function init(){

if (navigator.appName == "Netscape") {

layerStyleRef="layer.";

layerRef="document.layers";

styleSwitch="";

}else{

layerStyleRef="layer.style.";

layerRef="document.all";

styleSwitch=".style";

} }


function showLayerNumber(number){

var layerNumToShow=number;

showLayer(eval('"layer' + layerNumToShow+'"')); }



function hideLayerNumber(number){

var layerNumToHide=number;

hideLayer(eval('"layer' + layerNumToHide+'"')); }


function showLayer(layerName){

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"'); }


function hideLayer(layerName){

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"'); }

function showCapa(nomber){

if (nomber == 1) {

showLayerNumber(2);

showLayerNumber(1); }


else { alert("O") } }

</script>


<style type="text/css">

#layer1 {position: absolute; z-index: 2; visibility: hidden; left: 50px; top: 300px;}

#layer2 {position: absolute; z-index: 1; visibility: hidden; left: 15px; top: 200px;}

#loopControls {position: any; visibility: visible;}

</style>


</head>

<body onLoad="init()">

<div id="loopControls">

<p><a href="javascript:showCapa(1)">BOTÓN</a>

</div>


<!-- CONTENIDOS DE LOS LAYERS -->

<!--layer 1-->

<div id="layer1">

<map name="FPMap0">
<area href="javascript:hideLayerNumber(1)" shape="rect" coords="1054, 106, 1196, 138"></map>
<img border="0" dynsrc="imagen1.jpg" width="1230" height="630" usemap="#FPMap0">

</div>

<!--layer 2-->

<div id="layer2">

<map name="FPMap1">
<area href="javascript:hideLayerNumber(2)" shape="rect" coords="1055, 399, 1199, 428"></map>
<img border="0" dynsrc="imagen2.jpg" width="1230" height="630" usemap="#FPMap1">

</div>

</body>

</html>


¡Muchas gracias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow

RE:Superposición de capas

Publicado por ScriptShow (387 intervenciones) el 28/11/2009 16:38:51
  • ScriptShow se encuentra ahora conectado en el
  • chat de PHP
Veamos,

reduzcamos un poco el código; para lo que pretendes, puede ser suficiente con:

<html>
<head>
<script type="text/javascript">
st=0;
function showhide()
{
if (st==0)
{
document.getElementById('layer1').style.visibility="visible";
document.getElementById('layer2').style.visibility="visible";
st=1;
}
else
{
document.getElementById('layer1').style.visibility="hidden";
document.getElementById('layer2').style.visibility="hidden";
st=0;
}
}

function hideLayer(ly)
{
document.getElementById(ly).style.visibility="hidden";
st=0;
}
</script>

<style type="text/css">
#layer1 {position: absolute; z-index: 2; visibility: hidden; left: 50px; top: 300px;}
#layer2 {position: absolute; z-index: 1; visibility: hidden; left: 15px; top: 200px;}
#loopControls {position: relative; visibility: visible;}
</style>
</head>

<body>
<div id="loopControls">
<p><input type="button" value="Hde-Show" onclick="showhide()"></button>
</div>

<!--contenido layer 1-->

<div id="layer1">
<map name="FPMap0">
<area href="javascript:hideLayer('layer1')" shape="rect" coords="1054, 106, 1196, 138"></map>
<img border="0" dynsrc="imagen1.jpg" width="1230" height="630" usemap="#FPMap0">
</div>

<!--contenido layer 2-->

<div id="layer2">
<map name="FPMap1">
<area href="javascript:hideLayer('layer2')" shape="rect" coords="1055, 399, 1199, 428"></map>
<img border="0" dynsrc="imagen2.jpg" width="1230" height="630" usemap="#FPMap1">
</div>
</body>
</html>

No sé si es algo así lo que necesitas. Si es otra cosa, avisa.

Un Saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Superposición de capas

Publicado por oscar flores (1 intervención) el 13/03/2010 02:59:49
no entiendo a que se refieren con FPMap1. Lo que entiendo es que se trata de una variable pero por que FPMap1 que es que sinifica garcias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar