Livelli sovrapposti, problema

**james** · 08-10-2004, 12:02

Mi aiutate a creare qualcosa come quello postato nel file allegato? Vorrei che quando clicco sull'icona del colore del carattere, mi compaia il div precedentemente nascosto con la tavolozza dei colori.

Ho provato a farlo, vi faccio vedere il codice:

codice:

  <td>
   <div title="Colore Carattere" onclick="showHideLayers('mappa_colori_cc','show');">
    
   </div>
  </td>
 </tr>
</table>
<div id="mappa_colori_cc" onMouseOver="showHideLayers('mappa_colori_cc','show')" onMouseOut="showHideLayers('mappa_colori_cc','hide')">
 <table border="0" cellpadding="0" cellspacing="0" width="289" height="67">
  <tr>
   <td>Inclusione del file con la tavolozza</td>
  </tr>
 </table>
</div>

il codice javascript della funzione showHideLayers è questo:

codice:

function showHideLayers(livello1,stato) {
 if (document.all != null){ //IE
  if (stato == 'show') stato = 'visible';
  if (stato == 'hide') stato = 'hidden';
  theObj = eval("document.all['" + livello1 + "']");
  if (theObj) theObj.style.visibility = stato;
 } else { //Mozilla
  if (stato == 'show') stato = 'visible';
  if (stato == 'hide') stato = 'hidden';
  theObj = eval("document.getElementById('" + livello1 + "')");
  if (theObj) theObj.style.visibility = stato;
 }
}

Non ne vengo a capo, praticamente il div rimane nascosto, ma non si sovrappone a quello che c'è dopo di lui, anzi, si prende il suo spazio (circa 100px in altezza) che rimane bianco quando è nascosto...

**br1** · 08-10-2004, 15:33

Mi sembra azzardato volere che un elemento nascosto reagisca al passaggio del mouse... e non mi e' chiaro il risultato che vuoi ottenere.

Forse dovresti agire sulla proprieta' display... vedi l'esempio per IE:

codice:

<script>
function showHideLayers(livello1,stato) {
  if (stato == 'show') stato = 'block';
  if (stato == 'hide') stato = 'none';
  theObj = eval("document.all['" + livello1 + "']");
  if (theObj) theObj.style.display = stato;
}
</script>

<body>
<hr>
<div onMouseOver=" showHideLayers('mappa_colori_cc','show')
" style="background-color: silver;border: 1px solid black;">
passa qui
</div>
<hr>
<div id="mappa_colori_cc" onMouseOut=" showHideLayers('mappa_colori_cc','hide')" style="background-color: silver;border: 1px solid black; display: none;">
 <table border="0" cellpadding="0" cellspacing="0" width="289" height="67">
  <tr>
   <td>Inclusione del file con la tavolozza</td>
  </tr>
 </table>
</div>
<hr>
</body>

ciao

**james** · 08-10-2004, 16:04

Originariamente inviato da br1
Mi sembra azzardato volere che un elemento nascosto reagisca al passaggio del mouse... e non mi e' chiaro il risultato che vuoi ottenere.

Forse dovresti agire sulla proprieta' display... vedi l'esempio per IE:

codice:

<script>
function showHideLayers(livello1,stato) {
  if (stato == 'show') stato = 'block';
  if (stato == 'hide') stato = 'none';
  theObj = eval("document.all['" + livello1 + "']");
  if (theObj) theObj.style.display = stato;
}
</script>

<body>
<hr>
<div onMouseOver=" showHideLayers('mappa_colori_cc','show')
" style="background-color: silver;border: 1px solid black;">
passa qui
</div>
<hr>
<div id="mappa_colori_cc" onMouseOut=" showHideLayers('mappa_colori_cc','hide')" style="background-color: silver;border: 1px solid black; display: none;">
 <table border="0" cellpadding="0" cellspacing="0" width="289" height="67">
  <tr>
   <td>Inclusione del file con la tavolozza</td>
  </tr>
 </table>
</div>
<hr>
</body>

ciao

Ma in questo modo quando la tabella viene visualizzata mi sposta in basso tutto quello che c'è dopo di lei, io invece vorrei che si sovrepponesse a tutto ciò che la segue

**james** · 08-10-2004, 16:27

Originariamente inviato da james
Ma in questo modo quando la tabella viene visualizzata mi sposta in basso tutto quello che c'è dopo di lei, io invece vorrei che si sovrepponesse a tutto ciò che la segue

Ho risolto in questo modo:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Titolo</title>

<style type="text/css">

#pulsante { background-color: silver;border: 1px solid black; }

#mappa_colori_cc { z-index:3; background-color:silver; border: 1px solid black; display: none; position:absolute; }

</style>

<script>

function showHideLayers(elemento,azione) {

 if (azione == 'show') azione = 'block';

 if (azione == 'hide') azione = 'none';

 if (document.all != null) { oggetto = eval("document.all['" + elemento + "']"); }

 else { oggetto = eval("document.getElementById('" + elemento + "')"); }

 if (oggetto) oggetto.style.display = azione;

}

</script>

</head>





<body>

<hr>

<div id="pulsante" onClick="showHideLayers('mappa_colori_cc','show')">Clicca qui</div>

<hr>

<div id="mappa_colori_cc" onMouseOut="showHideLayers('mappa_colori_cc','hide')">

 <table border="1" cellpadding="0" cellspacing="0" width="289" height="67">

  <tr>

   <td>Inclusione del file con la tavolozza</td>

  </tr>

 </table>

</div>

Ciao

<hr>

</body>

</html>

Tutto stava nel position: absolute, ma in layout più complessi in cui gli elementi sono disposti con il float e non il position, se uso absolute il div mi si posiziona in base all'elemento radice HTML, e quindi nn mi si posiziona tutto a dx. E non posso neanche posizionarlo in maniera assoluta, perchè essendo il layout centrato, a seconda della risoluzione con cui si visita la pagina lo spazio tra il bordo del browser e la posizione reale che deve avere cambia!

Discussione: Livelli sovrapposti, problema

Strumenti discussione

Ricerca discussione

Visualizza

Livelli sovrapposti, problema

Permessi di invio