Ocultar layers
Tengo una página escrita en html con 5 layers escondidos (etiqueta: div, visible = 'hidden'). En uno de estos layers tengo una imagen que la he dividido en 4 secciones (utilicé 'usemap'). Al hacer click en una de las secciones de esta imagen deseo que aparezca uno de los layers y los demás permanezcan ocultos.
No encontré un objeto de javascript que contenga todos los layers del documento y poder recorrerlo como un arreglo, ir verificando su nombre o id y de acuerdo a esto, ocultarlo o no. (NOTA: document.all.name NO FUNCIONA, pude ver que todos los names son 'undefined')
Deseo por favor con urgencia el código javascript o una explicación para poder resolver mi problema.
No encontré un objeto de javascript que contenga todos los layers del documento y poder recorrerlo como un arreglo, ir verificando su nombre o id y de acuerdo a esto, ocultarlo o no. (NOTA: document.all.name NO FUNCIONA, pude ver que todos los names son 'undefined')
Deseo por favor con urgencia el código javascript o una explicación para poder resolver mi problema.
1 Respuesta
Respuesta de bruckner
1
Lo que deseas hacer no es muy complicado. Te pondré un ejemplo:
Supongamos que tienes cuatro capas:
<div id="capa1" style="visibility:hidden">...</div>
<div id="capa2" style="visibility:hidden">...</div>
<div id="capa3" style="visibility:hidden">...</div>
<div id="capa4" style="visibility:hidden">...</div>
No pongo la información de posicionamiento, porque no es relevante para este caso. Necesitas una sencilla función que controle la visibilidad de las capas. Para ello, lo más razonable es pasar como parámetro la ID de la capa a mostrar, ocultarlas todas y después mostrar ésta. La propiedad a la que hay que acceder es:
document.all.nombre_capa.style.visibility (en Explorer 4 y 5)
document.layers[nombre_capa].visibility (en Netscape 4)
document.getElementById(nombre_capa).style.visibility (en Explorer 5 y Netscape 6)
La función que te daré servirá para todos los casos. Tendrá que estar definida en un script en la cabecera de la página:
function muestraCapa(idCapa) {
var listaCapas=['capa1','capa2','capa3','capa4'];
if (document.getElementById) {
for (var i=0;i<listaCapas.length;i++) document.getElementById(listaCapas).style.visibility='hidden';
document.getElementById(idCapa).style.visibility='visible';
} else if (document.all) {
for (var i=0;i<listaCapas.length;i++) eval('document.all.'+listaCapas+'.style.visibility="hidden"');
eval('document.all.'+idCapa+'.style.visibility="visible"');
} else if (document.layers) {
for (var i=0;i<listaCapas.length;i++) document.layers[listaCapas].visibility='hide';
document.layers[idCapa].visibility='show';
} else alert('Su navegador no está soportado por esta página.');
}
Como puede verse con claridad, la función tiene una variable que tienes que llenar con una lista de los IDs de tus capas, y tres ramas de código que dan soporte a los tres grupos de navegadores que antes te comentaba. Puedes quitar cualquiera de las ramas para aligerar la función, teniendo en cuenta que:
a) Si quitas la tercera, dejas de soportar a Netscape 4.
b) Si quitas la segunda, dejas de soportar a Explorer 4 (no a Explorer 5).
c) Si quitas la primera, dejas de soportar a Netscape 6.
Con la primera rama sola soportas a Netscape 6 y Explorer 5, y con sólo la segunda a todas las versiones de Explorer.
Puedes llamar a la función, preferentemente, desde cualquier onClick de un enlace, con el nombre de la capa a mostrar.
Espero haberte sido de utilidad. No dudes en volverme a preguntar si lo necesitas.
Supongamos que tienes cuatro capas:
<div id="capa1" style="visibility:hidden">...</div>
<div id="capa2" style="visibility:hidden">...</div>
<div id="capa3" style="visibility:hidden">...</div>
<div id="capa4" style="visibility:hidden">...</div>
No pongo la información de posicionamiento, porque no es relevante para este caso. Necesitas una sencilla función que controle la visibilidad de las capas. Para ello, lo más razonable es pasar como parámetro la ID de la capa a mostrar, ocultarlas todas y después mostrar ésta. La propiedad a la que hay que acceder es:
document.all.nombre_capa.style.visibility (en Explorer 4 y 5)
document.layers[nombre_capa].visibility (en Netscape 4)
document.getElementById(nombre_capa).style.visibility (en Explorer 5 y Netscape 6)
La función que te daré servirá para todos los casos. Tendrá que estar definida en un script en la cabecera de la página:
function muestraCapa(idCapa) {
var listaCapas=['capa1','capa2','capa3','capa4'];
if (document.getElementById) {
for (var i=0;i<listaCapas.length;i++) document.getElementById(listaCapas).style.visibility='hidden';
document.getElementById(idCapa).style.visibility='visible';
} else if (document.all) {
for (var i=0;i<listaCapas.length;i++) eval('document.all.'+listaCapas+'.style.visibility="hidden"');
eval('document.all.'+idCapa+'.style.visibility="visible"');
} else if (document.layers) {
for (var i=0;i<listaCapas.length;i++) document.layers[listaCapas].visibility='hide';
document.layers[idCapa].visibility='show';
} else alert('Su navegador no está soportado por esta página.');
}
Como puede verse con claridad, la función tiene una variable que tienes que llenar con una lista de los IDs de tus capas, y tres ramas de código que dan soporte a los tres grupos de navegadores que antes te comentaba. Puedes quitar cualquiera de las ramas para aligerar la función, teniendo en cuenta que:
a) Si quitas la tercera, dejas de soportar a Netscape 4.
b) Si quitas la segunda, dejas de soportar a Explorer 4 (no a Explorer 5).
c) Si quitas la primera, dejas de soportar a Netscape 6.
Con la primera rama sola soportas a Netscape 6 y Explorer 5, y con sólo la segunda a todas las versiones de Explorer.
Puedes llamar a la función, preferentemente, desde cualquier onClick de un enlace, con el nombre de la capa a mostrar.
Espero haberte sido de utilidad. No dudes en volverme a preguntar si lo necesitas.
