problema di visibilità con 2 o piu layer

  • Creatore Discussione Creatore Discussione syrmos
  • Data di inizio Data di inizio
S

syrmos

Nuovo Utente
7 Feb 2012
28
0
0
Salve a tutti.
Ho un problema banale da risolvere, ma che al momento da solo non trovo soluzioni.
Ho 2 tabelle che vorrei aprire (cliccando su un'immagine) e chiudere in maniera indipendente l'una dall'altra.
Così cme ho scritto il codice (sicuramente errato) in realtà gli eventi sono legati e le operazioni risultanti pure.
Vorrei sapere avendo due layer distinti (search,searchd) come renderli indipendenti nelle operazioni di visibilità.

Grazie

Codice: 
#search
{
z-index:5;
display:block;
position:absolute;
top:270px;
left:820px;
}

#searchd
{
z-index:6;
display:block;
position:absolute;
top:270px;
left:120px;
}

Codice: 
<script language="javascript">
function showlayer(search,searchd)
{
document.getElementById("search").style.visibility="visible"; 
document.getElementById("searchd").style.visibility="visible"; 
}
function hidelayer(search,searchd)
{
document.getElementById("search").style.visibility="hidden"; 
document.getElementById("searchd").style.visibility="hidden"; 
}
</script>

Codice: 
<a href= "javascript:hidelayer()">Close this windows</a>
 
Codice: 
function showlayers()
{
document.getElementById("search").style.display="block"; 
document.getElementById("searchd").style.display="block"; 
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}
Non ho capito bene che intendevi per non legati tra loro, forse cosi? Ho un po corretto il codice
 
Grazie!
Ricapitolando:Ho due layer su entrambi c'è un'immagine,se ci clicco mi apre una tabella che posso successivamente chiudere;
il problema è che se provo a chiudere la tabella del layer "search" mi chiude anche la tabella del layer "searchd" e stessa cosa all'inverso(si aprono entrambi).
Con il codice che mi hai postato adesso non mi apre ne chiude niente ma sicuramente pr errore mio:
all'interno del div devo specificare qualcosa oppure va bene così scritto:

Codice: 
<div id="i4">
<a href="javascript:showlayer()"><img src="img3.jpg" width="220" height="130" border="2" alt="provaaaaaa">
</div></a>

<div id="i5">
<a href="javascript:showlayer()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>

Vi posto comunque tutte le parti del codice che interessano:

Codice: 
<html>
<head>
</head>
<style type="text/css">

#i4
{
position: absolute;
top: 30px;
left: 770px;
}

#i5
{
position: absolute;
top: 550px;
left: 180px;
}


#search
{
z-index:5;
display:block;
position:absolute;
top:270px;
left:820px;
}

#searchd
{
z-index:6;
display:block;
position:absolute;
top:270px;
left:120px;
}
</style>

<script language="javascript">
function showlayers()
{
document.getElementById("search").style.display="block"; 
document.getElementById("searchd").style.display="block"; 
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}
</script>

<body bgcolor="C0C0C0">
<div id="search">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
</form>
<a href= "javascript:hidelayer()">Close this windows</a>
</td></tr></table>
</div>

<div id="searchd">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search2" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
</form>
<a href= "javascript:hidelayer()">Close windows</a>
</td></tr></table>
</div>

<div id="i4">
<a href="javascript:showlayer()"><img src="img3.jpg" width="220" height="130" border="2">
</div></a>

<div id="i5">
<a href="javascript:showlayer()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>


</body>
</html>
 
Cosi funziona, ti posto tutta la pagina per evitare incomprensioni
Codice: 
<html>
<head>
</head>
<style type="text/css">

#i4
{
position: absolute;
top: 30px;
left: 770px;
}

#i5
{
position: absolute;
top: 550px;
left: 180px;
}


#search
{
z-index:5;
display:block;
position:absolute;
top:270px;
left:820px;
}

#searchd
{
z-index:6;
display:block;
position:absolute;
top:270px;
left:120px;
}
</style>

<script language="javascript">
function showlayer1()
{
document.getElementById("search").style.display="block";  
}
function showlayer2(){
    document.getElementById("searchd").style.display="block";
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}
</script>

<body bgcolor="C0C0C0">
<div id="search">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
</form>
<a href= "javascript:hidelayer1()">Close this windows</a>
</td></tr></table>
</div>

<div id="searchd">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search2" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
</form>
<a href= "javascript:hidelayer2()">Close windows</a>
</td></tr></table>
</div>

<div id="i4">
<a href="javascript:showlayer1()"><img src="img3.jpg" width="220" height="130" border="2">
</div></a>

<div id="i5">
<a href="javascript:showlayer2()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>


</body>
</html>
 
Grazie tante, perfetto!!
se è possibile volevo chiederti un'ulteriore spiegazione:
Se volessi nascondere automaticamente un livello quando ne seleziono un'altro?
Cliccando l'immagine mi appare la tabella, se clicco sull'altra immagine mi si apre l'altra tabella e vorrei che la prima che si chiudesse automaticamente(una volta selezionato il nuvo livello quello vecchio si nasconde).
Ho trovato questo codice (da controllare se ho messo i giusti parametri) ma se provo ad utilizzarlo non funziona, inoltre non so cosa aggiungere nei div:

Codice: 
<script language="javascript">

oldlayer = ""

function showlevel(search)
if(search)
{
document.layers[search].visibility = "hidden"
}
document.layers[searchd].visibility = "visible"
search = searchd
</script>
 
Non ho capito molto bene, intendi forse di volerne tenere solo uno aperto?
Codice: 
function showlayer1(){
  hidelayer2();
  document.getElementById("search").style.display="block";  
}
function showlayer2(){
    hidelayer1();
    document.getElementById("searchd").style.display="block";
}
 
Provo a spiegarmi:in pratica se apro tabella1 e dopo apro tabella2, tabella1 si chiuderà automaticamente (stessa cosa se faccio l'inverso); in pratica non avrò mai nello stesso momento i due livelli (o tabelle) visibili.
Con l'ultimo codice ho sempre le tabelle visibili

grazie
 
Non riesco a farlo funzionare..Potresti postarmi anche il codice da metter dentro il div o è uguale a quello precedente:
Grazie

Codice: 
<div id="search">
<a href= "javascript:hidelayer()">Close this windows</a>
</div>

<div id="searchd">
<a href= "javascript:hidelayer()">Close windows</a>
</div>

<div id="i4">
<a href="javascript:showlayer()"><img src="img3.jpg" width="220" height="130" border="2">
</div></a>

<div id="i5">
<a href="javascript:showlayer()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>
 
syrmos ha scritto:
Non riesco a farlo funzionare..Potresti postarmi anche il codice da metter dentro il div o è uguale a quello precedente:
Grazie

Codice: 
<div id="search">
<a href= "javascript:hidelayer()">Close this windows</a>
</div>

<div id="searchd">
<a href= "javascript:hidelayer()">Close windows</a>
</div>

<div id="i4">
<a href="javascript:showlayer()"><img src="img3.jpg" width="220" height="130" border="2">
</div></a>

<div id="i5">
<a href="javascript:showlayer()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>
Clicca per allargare...
Setta una delle tabelle non visibile da css e prova modificando i nomi delle funzioni
Codice: 
<div id="search">
<a href= "javascript:hidelayer1()">Close this windows</a>
</div>

<div id="searchd">
<a href= "javascript:hidelayer2()">Close windows</a>
</div>

<div id="i4">
<a href="javascript:showlayer1()"><img src="img3.jpg" width="220" height="130" border="2">
</div></a>

<div id="i5">
<a href="javascript:showlayer2()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>
 
Scusa,Non so se ho capito....
Settando una tabella non visibile non riesco piu a visualizzarla se provo a cliccare sull'immagine

Grazie

Codice: 
<style type="text/css">

#search
{
visibility:hidden;
z-index:5;
display:block;
position:absolute;
top:270px;
left:820px;
}

#searchd
{
z-index:6;
display:block;
position:absolute;
top:270px;
left:120px;
}
</style>

<script language="javascript">
function showlayer1()
{
document.getElementById("search").style.display="block";  
}
function showlayer2(){
    document.getElementById("searchd").style.display="block";
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}

</script>

<body bgcolor="C0C0C0">

<div id="search">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer1()">Close this windows</a>
</td></tr></table>
</div>

<div id="searchd">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search2" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer2()">Close windows</a>
</td></tr></table>
</div>

<body bgcolor="C0C0C0">
<div id="i4">
<a href="javascript:showlayer1()"><img src="img3.jpg" width="220" height="130" border="2" alt="prova">
</div></a>

<div id="i5">
<a href="javascript:showlayer2()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>


</body>
</html>
 
syrmos ha scritto:
Scusa,Non so se ho capito....
Settando una tabella non visibile non riesco piu a visualizzarla se provo a cliccare sull'immagine

Grazie

Codice: 
<style type="text/css">

#search
{
visibility:hidden;
z-index:5;
display:block;
position:absolute;
top:270px;
left:820px;
}

#searchd
{
z-index:6;
display:block;
position:absolute;
top:270px;
left:120px;
}
</style>

<script language="javascript">
function showlayer1()
{
document.getElementById("search").style.display="block";  
}
function showlayer2(){
    document.getElementById("searchd").style.display="block";
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}

</script>

<body bgcolor="C0C0C0">

<div id="search">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer1()">Close this windows</a>
</td></tr></table>
</div>

<div id="searchd">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search2" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer2()">Close windows</a>
</td></tr></table>
</div>

<body bgcolor="C0C0C0">
<div id="i4">
<a href="javascript:showlayer1()"><img src="img3.jpg" width="220" height="130" border="2" alt="prova">
</div></a>

<div id="i5">
<a href="javascript:showlayer2()"><img src="img2.jpg" width="220" height="130" border="2">
</div></a>


</body>
</html>
Clicca per allargare...

Ma tu intendevi una cosa simile?
Codice: 
<style type="text/css">

#search
{
z-index:5;
display:none;
position:absolute;
top:130px;
left:120px;
}

#searchd
{
z-index:6;
display:none;
position:absolute;
top:270px;
left:120px;
}
</style>

<script language="javascript">
function showlayer1(){
  hidelayer2();
  document.getElementById("search").style.display="block";  
}
function showlayer2(){
    hidelayer1();
    document.getElementById("searchd").style.display="block";
}
function hidelayer1()
{
document.getElementById("search").style.display="none"; 
}
function hidelayer2(){
document.getElementById("searchd").style.display="none"; 
}

</script>

<body bgcolor="C0C0C0">

<div id="search">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer1()">Close this windows</a>
</td></tr></table>
</div>

<div id="searchd">
<table bgcolor="white" cellpadding="10" border="2"><tr><td>
<h3>Ricerca nel sito</h3>
<form action="http://libero.it" method="post">
<img src="com.gif" alt="search2" width="22" height="15" border="0">
Search for this keywords:<br>
<input type="text" size="20" name="search string">
<input type="image" src="img.jpg" width="20" height="20" border="0"><br>
<a href="http://zakkwylde.com">Prova 1</a><br>
<a href="http://zakkwylde.com">Prova 2</a><br>
<a href="http://zakkwylde.com">Prova 3</a><br>
</form>
<a href= "javascript:hidelayer2()">Close windows</a>
</td></tr></table>
</div>

<div id="i4">
<a href="javascript:showlayer1()"><img src="img3.jpg" width="220" height="130" border="2" alt="prova"></a>
</div>

<div id="i5">
<a href="javascript:showlayer2()"><img src="img2.jpg" width="220" height="130" border="2"></a>
</div>
 
Si intendevo così! Grazie!
L'ultimissima cosa..all'apertura della pagina vorrei che le tabelle in questione non fossero visualizzate ma che apparissero solo quando vado a cliccare sull'immagine.Ho provato con "visibility:hidden;" nel css ma così la tabella non viene piu visualizzata.
Devo implementare la funzione?

grazie ancora
 
syrmos ha scritto:
Si intendevo così! Grazie!
L'ultimissima cosa..all'apertura della pagina vorrei che le tabelle in questione non fossero visualizzate ma che apparissero solo quando vado a cliccare sull'immagine.Ho provato con "visibility:hidden;" nel css ma così la tabella non viene piu visualizzata.
Devo implementare la funzione?

grazie ancora
Clicca per allargare...

Ciao,

sicuro che all'apertura della pagina visualizzi i div search e searchd?

hanno la proprietà display impostata a none nel css

display:none;

cambi la proprietà a block quando clicchi sull'immagine.

Valeria.
 
Grazie vale, erano impostati su block,cambiando su none ora funziona tutto.

Grazie ancora!
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

S
[HTML] Problema non visibilità del sito
Risposte
1
Visite
1K
HTML e CSS
Max 1
Max 1
voldemort
Problema in Shopify con Pixel Facebook
Risposte
1
Visite
2K
E-Commerce
m.pittini
M
F
Problema pulsante cerca record su access
Risposte
0
Visite
2K
Database
futty71
F
I
Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz-
Risposte
0
Visite
1K
HTML e CSS
Ikon
I
K
Problema form update
Risposte
2
Visite
1K
PHP
WEBLEADERS
W
O
problema con dvr dahua xvr5116
Risposte
0
Visite
1K
IP Cam e Videosorveglianza
oky74
O
S
Problema nel ciclare un json
Risposte
0
Visite
3K
Javascript
Soulfearor
S
G
Problema con Xampp
Risposte
1
Visite
1K
Web Server
GreatOtaku
G
andrea barletta
Problema con miniature comandi
Risposte
0
Visite
1K
Photoshop
andrea barletta
andrea barletta
I
problema con alice
Risposte
0
Visite
1K
Posta Elettronica
ilprincipiante
I
K
Problema Inner join
Risposte
1
Visite
880
PHP
Kiko74b
K
F
firefox problema http
Risposte
0
Visite
2K
Linux e Software
frankz
F
N
Problema con position absolute e overflow
Risposte
4
Visite
1K
HTML e CSS
Nocciolina
N
E
Problema jquery Success
Risposte
2
Visite
2K
jQuery
marino51
marino51
L
Problema con inner join
Risposte
11
Visite
2K
PHP
marino51
marino51
K
[php] Problema con inner join
Risposte
4
Visite
1K
PHP
Kiko74b
K
E
problema selezione sfumata
Risposte
2
Visite
1K
Photoshop
chrdam
C
K
[PHP] Problema con variabili concatenate.
Risposte
1
Visite
1K
PHP
thanatos
T
A
Problema filtro fluidifica Photoshop
Risposte
1
Visite
3K
Photoshop
WmbertSea
WmbertSea
H
Problema Bordi Scontorno
Risposte
1
Visite
2K
Photoshop
WmbertSea
WmbertSea
Alto Basso