stili css e javascript che si sovrappongono

[retorno]

Ciao a tutti,

avrei bisogno di una vostra diritta :-)

utilizzando Javascript per cambiare delle proprietà di stile di elementi html gia formatati con un foglio css, ho osservato che le nuove proprietà che dichiaro si sovrappongono a quelle del foglio css.

Per farvi un esempio, ho formattato utilizzando i selettori "a" ed "a:hover" un link mediante il foglio css, quindi dopo un evento load il link che identifico con getElementById (che è quello della pagina corrente) dovrebbe cambiare stile (la immagine che funziona come punto elenco per intenderci dovrebbe cambiare per indicare che siamo in quella pagina e il testo dovrebbe cambiare colore e diventare bold), succede cosi ma mi rimangono comunque attivi gli stili "a" ed "a:hover" che non mi è riuscito levare, quindi si sommano senza permettermi formattare il link come voglio.

Come posso disabilitare queste stili per l'elemento scelto con Javascript? Vorrei comunque conservare il effetto a:hover del foglio di stile per chi non ha attivo Javascript...

Spero di essere stata abbastanza chiara... perché il argomento forse spiegato cosi è un pò complesso... sopratutto perché sono ai miei primi tentativi con Javascript... abbiate pazienza

Grazie, aspetto le vostre indicazioni
A presto

[andr3a]

eh? ... un link, un esempio dello stile ... qualcosa, grazie :master:

[retorno]

Hai ragione, scusate
Ecco il codice

HTML

<div id="menu">
<ul>[*]pagina1[*]pagina2[*]pagina3[/list]
</div>

CSS

/* div menu principale */
div#menu {
position: relative;
width: 180px;
left: 82px;
top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding: 10px;
}

/* stile menu */
#menu ul {
margin: 0px;
list-style-type: none;
padding: 5px 0px 0px 0px;
}

/* stile elenco puntato */
#menu ul li{
padding: 2px 0px 2px 0px;
}

/* stile link */
a {
color: #FFFFFF;
text-decoration: none;
}

/* stile elenco puntato link */
#menu ul li a {
background-image: url(images/freccino_out.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding: 0px 0px 0px 9px;
display: block;
font-weight: normal;
}

/* stile elenco puntato link a mouse over */
#menu ul li a:hover {
color: #999999;
background-image: url(images/freccino_in.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding: 0px 0px 0px 9px;
display: block;
font-weight: normal;
}

/* stile per pagina corrente */
.in {
font-weight: bold;
background-image: url(images/freccino_in.gif);
background-repeat: no-repeat;
background-position: 0px 7px;
color: #999999;
}

/* stile per pagina non corrente */
.out {
background-image: none;
}

JAVASCRIPT

function load(){
var pagina_corrente = document.URL;

if (pagina_corrente.indexOf("pagina1.htm") == (-1))
{
var el = document.getElementById("pagina1");
el.className = "out";
}
else
{
var el = document.getElementById("pagina1");
el.removeAttribute ("href");
el.className = "in";
}

if (pagina_corrente.indexOf("pagina2.htm") == (-1))
{
var el = document.getElementById("pagina2");
el.className = "out";
}
else
{
var el = document.getElementById("pagina2");
el.removeAttribute ("href");
el.className = "in";
}

if (pagina_corrente.indexOf("pagina3.htm") == (-1))
{
var el = document.getElementById("pagina3");
el.className = "out";
}
else
{
var el = document.getElementById("pagina3");
el.removeAttribute ("href");
el.className = "in";
}

}

spero sia sufficiente, non ho voluto metterlo tutto per non fare confusione...
Grazie

[retorno]

... non vi a capitato mai questo problema? non cè nessuno che può darmi una mano?

[retorno]

ok, ho fatto finalmente

grazie cmq