cambiare backgroudimage con javascript

[sjpagan]

Salve a tutti, sto avendo notevoli problemi a cambiare un'immagine di sfondo sotto a un semplice li....

Nel mio css ho definito le proprietà di hover che riporto di seguito:
#menu_sx ul a li{

background-image: url(../images/bottoni/bot_sx_c.png);
background-repeat: no-repeat;
}

#menu_sx a:link{
text-decoration: none;
}
#menu_sx a:visited{
text-decoration: none;
}
#menu_sx a li:hover{
background-image: url(../images/bottoni/bot_sx_h.png);
}

#menu_sx a li:active{
background-image: url(../images/bottoni/bot_sx_h.png);
}

il mio codice html è il seguente :





<div id="menu_sx">
<ul id="menu">
<a href="#div1" >
<li id="home">
HOME

</a>
<a href="#div2">[*]
EVENTI

</a>
<a href="#div3">[*]
GALLERY

</a>
<a href="#div4">[*]
CONTATTI

</a>[/list]
</div>
abbastanza semplice come esempio, sto cercando di cambiare lo sfondo di questo li ma niente da fare.... ho provato ad aggiungere una classe con addClass ma nulla se devo cambiare solo il colore va bene ma se provo a farlo con un'immagine nulla.....

Ho provato anche a cambiare lo stile dell css con la funzione css e la mia idea era quella di ristabilire l'immagine di default per tutti i vari li e poi mettere quella con l'effetto hover al link selezionato, ma nulla....

il mio codice javascript è il seguente:

$('#menu>a>li').click(function(){
$('#menu>a>li').css("backgroundImage","url(../images/bottoni/bot_sx_c.png)");
$(this).css("backgroundImage","url(../images/bottoni/bot_sx_h.png)");
})

qualcuno può darmi qualche aiuto in merito ?

[Nobody33]

Stai usando una F16 per abattere una mosca, ovvero usi jquery per cambiare un immagine di sfondo .

#menu_sx a:visited{
text-decoration: none;
}
#menu_sx li a:active{
background-image: url(../images/bottoni/bot_sx_h.png);
}
#menu_sx li a:hover{
background-image: url(../images/bottoni/bot_sx_h.png);
}

Se poi l'immagine di sfondo la vuoi sui li, metti nel foglio di stile un bel display:block per i link ed imposti padding, margin, grandezza, tutto quello che vuoi.
Inoltre, potresti spiegare cosa vorresti fare con a:active?
Potrebbe essere che vuoi una classe ".active" per avere un immagine di sfondo sulla pagina attiva piùttosto di avere un a:active?

[Xinod]

il tuo markup e' sbagliato: un <ul> contiene solo[*], i link non possono trovarsi li' e questo puo' generare imprevisti

[sjpagan]

Ummm pienamente daccordo con te, La mia pagina non viene aggirnata, e le varie pagine vengono caricate tutte tramite show e hide, quindi ho la necessità di mostrare all'utente in che sezione si trova però senza aggiornare del tutto la pagina, considerando che è bella pesante....

Non c'è un modo rapido e veloce per fare questa cosa ?

[Nobody33]

Si, esiste:

usa una classe .active per ogni pagina che è attiva. Li dentro poi metti l'immagine.

Se posti un link, però, è meglio.

Magari lo carichi da qualche parte, altervista ad esempio



EDIT:

Inoltre, stando alle indicazioni di @xinod:

<ul>[*]   [*]    [*]    [/list]

Fa proprio parte delle fondamenta html

[sjpagan]

Xinod come faccio a fare tutta la superfice del mio bottone che sia cliccabile ? di solito ho sempre fatto così per rendere tutta la superfice cliccabile...
:-(

[sjpagan]

ok sono riuscito a fare l'effetto hover......... perfetto adesso come faccio a correggere questo errore madornale ?
<ul>[*][/list]
in modo da ottenere tutta la superfice del mio bottone linkabile e non solamente il testo ?

[Nobody33]

Se poi l'immagine di sfondo la vuoi sui li, metti nel foglio di stile un bel display:block per i link ed imposti padding, margin, grandezza, tutto quello che vuoi.

Hai letto?



EDIT

Facciamo prima: Ecco un ESEMPIO

[sjpagan]

Grazieeeeeeeee Tutto risolto....