Bonsoir à tous,
EN BREF :
Pour généraliser le problème : si l'on change via Javascript la valeur d'une propriété CSS d'un élément (par exemple la couleur d'une balise <a> en bleu), est-il normal que si l'on a une feuille de style en parallèle son contenu pour ce même élément (un a.class:hover {color: red}) ne soit plus pris en compte si le Javascript a eu l'occasion de la modifier une fois auparavant?
EN DETAIL :
Je viens de rencontrer un petit souci relatif à la modification d'une propriété de style via Javascript : css ne reprend plus le dessus quand c'est à son tour de jouer.
Je m'explique :
J'ai un tableau, avec deux colonne.
Le but recherché ?
Avoir deux colonnes de liens, dont seulement ceux de la 2ème colonne ont une image en background (simulation d'une puce). Lorsque que l'on passe sur les liens de la colonne DROIT, l'image se déplace de 5px sur la droite. Lorsque que l'on passe sur les liens de GAUCHE, l'image (du lien de la colonne DROIT) se déplace de 5px sur la gauche.
Exemple pratique:
(gauche)Lien1 * Lien1(droit) <-- sans évènement
(gauche)Lien1 *Lien1(droit) <-- onmouseover colonne DROIT
(gauche)Lien1* Lien1(droit) <-- onmouseover colonne GAUCHE
Pour cela, une feuille CSS, pour que les liens DROIT possède une image:
Donc quand je passe sur un lien de la cellule DROIT, l'image se déplace de 5px vers la droite. Parfait !
Pour la celulle gauche, j'ai recours au Javascript. Au chargement de la page, je crée des évènements "onmouseover" pour chaque lien de la colonne GAUCHE, et leur affecte une fonction qui va modifier la position de l'image dans la colonne DROIT.
Ca marche parfaitement aussi. Avec un onmouseout également, pour redonner à l'image sa position d'origine, à savoir "5px 50%".
Là où le problème se pose, c'est que la colonne DROIT marche parfaitement si je passe ma souris dessus sans être aucunement passé sur le lien en face dans la la colonne GAUCHE.
En effet, dès que je suis passé sur un lien de la colonne GAUCHE, et que je passe sur celui de DROIT (qui a été modifié via JS quand je passais sur le GAUCHE) la feuille CSS ne modifie plus la position du background. J'ai ajouté dans ma feuille un
Pour agrémenter ce test, j'ai ajouté dans mon JS
Maintenant, la feuille ne me recolore plus le texte de la colonne DROIT en 'red' quand je passe dessus (après être passé sur celui de GAUCHE)
Cela est-il normal ? Est-ce un bug où m'y prendrais-je mal ? J'espère qu'il y a une solution en tout cas
Merci.
Modifié par EureKa (06 Dec 2006 - 09:18)
EN BREF :
Pour généraliser le problème : si l'on change via Javascript la valeur d'une propriété CSS d'un élément (par exemple la couleur d'une balise <a> en bleu), est-il normal que si l'on a une feuille de style en parallèle son contenu pour ce même élément (un a.class:hover {color: red}) ne soit plus pris en compte si le Javascript a eu l'occasion de la modifier une fois auparavant?
EN DETAIL :
Je viens de rencontrer un petit souci relatif à la modification d'une propriété de style via Javascript : css ne reprend plus le dessus quand c'est à son tour de jouer.
Je m'explique :
J'ai un tableau, avec deux colonne.
<td id="gauche">
<a href="#">lien1</a>
<a href="#">lien2</a>
<a href="#">lien3</a>
<a href="#">lien4</a>
<a href="#">lien5</a>
</td>
<td id="droit">
<a href="#">lien1</a>
<a href="#">lien2</a>
<a href="#">lien3</a>
<a href="#">lien4</a>
<a href="#">lien5</a>
</td>Le but recherché ?
Avoir deux colonnes de liens, dont seulement ceux de la 2ème colonne ont une image en background (simulation d'une puce). Lorsque que l'on passe sur les liens de la colonne DROIT, l'image se déplace de 5px sur la droite. Lorsque que l'on passe sur les liens de GAUCHE, l'image (du lien de la colonne DROIT) se déplace de 5px sur la gauche.
Exemple pratique:
(gauche)Lien1 * Lien1(droit) <-- sans évènement
(gauche)Lien1 *Lien1(droit) <-- onmouseover colonne DROIT
(gauche)Lien1* Lien1(droit) <-- onmouseover colonne GAUCHE
Pour cela, une feuille CSS, pour que les liens DROIT possède une image:
td#DROIT a {
background-position: 5px 50%;
background-image: url('image.png');
}
td#DROIT a:hover {
background-position: 10px 50%;
color: red;
}Donc quand je passe sur un lien de la cellule DROIT, l'image se déplace de 5px vers la droite. Parfait !
Pour la celulle gauche, j'ai recours au Javascript. Au chargement de la page, je crée des évènements "onmouseover" pour chaque lien de la colonne GAUCHE, et leur affecte une fonction qui va modifier la position de l'image dans la colonne DROIT.
// ELEMENT étant le lien se situant juste en face, dans la colonne DROIT
ELEMENT.style.backgroundPosition='0px 50%';Ca marche parfaitement aussi. Avec un onmouseout également, pour redonner à l'image sa position d'origine, à savoir "5px 50%".
Là où le problème se pose, c'est que la colonne DROIT marche parfaitement si je passe ma souris dessus sans être aucunement passé sur le lien en face dans la la colonne GAUCHE.
En effet, dès que je suis passé sur un lien de la colonne GAUCHE, et que je passe sur celui de DROIT (qui a été modifié via JS quand je passais sur le GAUCHE) la feuille CSS ne modifie plus la position du background. J'ai ajouté dans ma feuille un
color: redbackground-position: 10px 50%;Pour agrémenter ce test, j'ai ajouté dans mon JS
ELEMENT.style.color='blue';Maintenant, la feuille ne me recolore plus le texte de la colonne DROIT en 'red' quand je passe dessus (après être passé sur celui de GAUCHE)
Cela est-il normal ? Est-ce un bug où m'y prendrais-je mal ? J'espère qu'il y a une solution en tout cas
Merci.
Modifié par EureKa (06 Dec 2006 - 09:18)
En tout cas merci.
, avec les enfants demain !.
