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??

[Bovino]

mais quand je compile

Tu compiles du JavaScript toi ?

Ta fonction est appelée à quel moment ?

[TiranusKBX]

met dans ton code 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" onclick="clic(1);"></li>
    <li id="lumiere_2" onclick="clic(2);"></li>
    <li id="lumiere_3" onclick="clic(3);"></li>
    <li id="lumiere_4" onclick="clic(4);"></li>
</ul>

[-Rpass-]

Il nous faut voir le code ou tu initialises valeur et appelle ta fonction JS

[Basile le disciple]

Tu compiles du JavaScript toi ?

Pas faux, pas faux... mais comme je faisais du pascal delphi avant, j'ai gardé le vocabulaire

voilà le moment où j'appelle la fonction :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="icones">
    <ul class="boite">
        <li onclick="clic(0)"><div>#1</div></li>              
        <li onclick="clic(1)"><div>#2</div></li>
        <li onclick="clic(2)"><div>#3</div></li>
        <li onclick="clic(3)"><div>#4</div></li>
    </ul>    
</div>

Mais je ne pense pas que le problème viennent de là car l'ombre bouge bien, signifiant que le onclick est bien déclenché mais la couleur de fond ne change pourtant pas....

[TiranusKBX]

ça change quelque chosE si tu remplace "background-color" par "background" ?

[Basile le disciple]

ça change quelque chosE si tu remplace "background-color" par "background" ?

Oui!!
J'aurais jamais deviné que c'était ça le problème. Merci beaucoup à tous ceux qui ont pris la peine de me répondre!! C'était tellement idiot...

[TiranusKBX]

la propriété "background-color" étant souvent fixe cela ne m'étonne pas
et c'est aussi pourquoi j'évite de l'utiliser

[NoSmoking]

Bonjour,

J'aurais jamais deviné que c'était ça le problème(...)

je ne vois pas en quoi cela pourrait interférer sauf si d'autres valeurs sont donnés par après sur le background, background-color n'étant qu'une partie de la propriété background.

Par contre dans ton code CSS les commentaires ne sont pas valides et font que le CSS n'est pas pris en compte

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Comment insérer un commentaire dans une feuille de style ?