Discussion :

[Basile le disciple]

Bonjour � tous,

Je d�bute le javascript, le CSS et le HTML5 depuis quelques semaines, et je suis confront� � un probl�me depuis 3 jours, � s'en arracher les cheveux:

je voudrais essayer de reproduire cet effet. J'en suis au stade des lumieres qui s'allument et s'�teignent...

La seule solution que j'ai trouv�e et de changer la classe de chaque lumi�re(des li avec des identifiants lumiere_1/2 etc...) � chaque click sur les icones.

le CSS

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
//alluméé
.lumiere_allume{
    background-color: white; 
    box-shadow: -1px 1px 10px 3px white;     
}
//éteinte
    .lumiere_eteinte{
    background-color: rgb(25,25,25);
    box-shadow: none;
}

le javascript:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
function clic(valeur){
    //valeur correspond à l'indice des li
    for (var i=1;i<5;i++){
        document.getElementById('lumiere_'+i).className='lumiere_eteinte';    
    }
    document.getElementById('lumiere_'+(valeur+1)).className='lumiere_allume';
}

et le HTML

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
<ul id="lumieres">
    <li id="lumiere_1"></li>
    <li id="lumiere_2"></li>
    <li id="lumiere_3"></li>
    <li id="lumiere_4"></li>
</ul>

mais quand je compile, les couleurs de fond ne changent pas au click. Pourquoi???
Y a-t-il confrontation avec les identifiants(vide) et les classes??