Posizionare un div rispetto ad un div fixed

[lore83]

Ciao a tutti.
Ho un div in posizione fixed posizionato in basso

div#fixed_bar{
    position:fixed;
    bottom:0px;
    } 

Come posso creare, con l'evento onMouseOver o onClick, un div che vada a posizionarsi sopra a questo rimanendo sul prolungamento di 2 lati del div di partenza? (è più difficile da spiegare che da capire, prendete ad esempio la chat online di facebook, al click si apre la chat che si sviluppa sul prolungamento del lato superiore e sinistro del div iniziale)
E' necessario impostare un width, quindi il tutto si basa sul conoscere esattamente la posizione degli elementi in gioco?

Grazie e ciao.

[Mich_]

Anzitutto gli eventi sono relativi a JS. In CSS esistono gli stati, che si attivano con le pseudoclassi.
Se la soluzione deve coinvolgere tale linguaggio, ti sposto nel forum corrispondente.

Per quanto riguarda i CSS, all'evento onmouseover corrisponde lo stato :hover, mentre al momento non esiste nella pratica uno stato corrispondente all'evento onclick (esiste lo stato :active, che pero` vive solo fino a che il bottone resta premuto).

Non sono sicuro di aver capito esattamente cosa vuoi ottenere (non uso facebook).

Se la richiesta e` di "allargare" e/o "aumentare l'altezza" di un oggetto in certe circostanze, la cosa si fa semplicemente cambiandone le dimensioni, ad esempio:

#fixed_bar {
    position:fixed;
    bottom:0px;
    width: 100px;
    height: 50px;
}
#fixed_bar:hover {
    width: 300px;
    height: 250px;
}

(non funziona in IE6: in tale browser :hover funziona solo sui link)

Se il problema e` far apparire un altro oggetto all'interno della finestra fissa, puoi cambiare la visibilita` di tale oggetto:

<div id="fixed_bar">
  

qui il testo "piccolo" </p>
  <div>

qui il testo da far apparire quando la finestra si allarga</p></div>
</div>

CSS:

#fixed_bar {
    position:fixed;
    bottom:0px;
    width: 100px;
    height: 50px;
}
#fixed_bar:hover {
    width: 300px;
    height: 250px;
}
#fixed_bar p {
    z-index: 10;
    position: absolute;
    top:0; left:0;
    ...
}
#fixed_bar div {
    z-index: 20;
    display: none;
    position: absolute;
    top:0; left:0;
    ...
}
#fixed_bar:hover div {
    display: block;
}