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!
¿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
0
