Livelli sovrapposti, problema

[james]

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:

  <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:

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...