Ad ogni voce di menu uno sfondo diverso

pikadilly

Ad ogni voce di menu uno sfondo diverso

Ciao a tutti,
vorrei da voi un parere per vedere se quello che ho in mente di fare è possibile realizzarlo con i css. Io sono convinta di sì, ma non ne sono sicura!
Vediamo di spiegarci al meglio.

Ho un header diviso graficamente in due. A destra c'è il menu verticale, a sinistra l'immagine di sfondo dell'header.
Attraverso i posizionamenti assoluti e le liste ho fatto in modo che al passaggio del mouse su ogni voce di menu, a sinistra il fondo dell'header cambi.

Per la home, ad esempio, abbiamo una quaglia, per "chi siamo" un coguaro e così via.

Attenzione: solo la parte sinistra dell'intero header cambia, ma non lo sfondo della parte destra, che, pur facendo parte dell'header, se quaglia era senza mouse sopra i link, quaglia rimane anche se a sinistra c'è ad esempio il coguaro. Non so se mi spiego.

Ecco, io vorrei fare in modo che anche sotto il menù cambi a seconda della voce quando si è sullo stato hover. Vorrei che se passo con il mouse su "chi siamo" la figura del coguaro si estendesse anche sotto il menu. Per ora il css che cambia solo la parte sinistra è questo:

#header .menu{
    height: 200px;
    padding-top: 9em;
    padding-right: 3em;
    float: right;
    width: 150px;
text-align: right;
}

 .menu li a span{
    color: #FFFFFF;
    
        
} .menu ul li ul span{
    position: absolute;
    top: 0;
    visibility: hidden;
} 

        /*home*/
        .menu ul li:hover ul span.home{
display:block;
visibility:visible;
    z-index:2;
    background-image: url(../images/quaglia.jpg);
    height: 423px;
    width: 470px;
    background-repeat: no-repeat;
left:0;
    top: 0;
    
 }
/*chi siamo*/ .menu ul li:hover ul span.chi_siamo{
    visibility:visible;
    z-index:1;
    background-image: url(../images/coguaro.jpg);
    height: 423px;
    width: 470px;
    background-repeat: no-repeat;
left:0;
    top: 0;
    
    
        }
```Xhtml:

<div class="menu"><ul>
<li><a href="#"><span>Home</span></a><ul><li><span class="home"></span></li></ul></li>
<li><a href="#"><span>Chi siamo</span></a><ul><li><span class="chi_siamo"></span></li></ul></li>
</ul></div>


Grazie a tutti. ;)

karedas

Ciao Pikadilly

Si scusa intanto per l'attesa ma ti chiederei gentilmente un esempio almeno mi illumini!

Grazie

pikadilly

Niente scuse, non ti preoccupare.

Ecco l'esempio...
Non fai caso alla grafica, ho dovuto cancellare il nome dell'oggetto del sito...

http://www.pikadilly.it/provafilmatoforum/img_sfondo/index.html

Visto così ha un immagine di default, se passi su home cambia l'immagine a sinistra, se passi su "chi siamo" idem.
In sostanza vorrei che il cambio di immagine di home e "chi siamo" si estendesse fino a sotto il menu, che ora presenta i tavoli dell'immagine di default.

mas245

l'immagine di hover e di circa 300 px più piccola di quella di default credo che dovresti per farla comparire in tutto lo sfondo almeno che sia uguale, spero di aver capito il problema altrimenti scusami

pikadilly

@Mas245 said:

l'immagine di hover e di circa 300 px più piccola di quella di default credo che dovresti per farla comparire in tutto lo sfondo almeno che sia uguale, spero di aver capito il problema altrimenti scusami

Niente scuse, tranquillo.

Purtroppo però non è quello il problema, se l'avessi fatta a tutto sfondo avrebbe coperto il menu.

Grazie comunque per la risposta.