[resolu] Conflit css / javascript avec background-position

Bonjour,

Soit 3 images (a,b,c) dans un menu avec 3 etat (actif , over, inactif) a l'interieur d'une page fixe (pas de rechargement du contenu).

Au chargement de la page 1 image est active (a) et les deux autres sont inactive(b,c).

Le survol est géré par CSS "a:hover{background-position}"

Quand je clique sur (b), une fonction javascript change l'etat de l'image(a) en inactif, et celui de (b) en actif, grace a "style.backgroundPosition"



Apres l'appel a la fonction javascript, le comportement CSS "a:hover" ne fonctionne plus.


2 questions :

#1 : Suis-je clair ?

#2 : Quelqu'un a-t-il une piste pour m'aider a resoudre ce probleme


PS : mon menu s'inspire ouvertement du menu haut de www.apple.com mais sans rechargment de la page.


Merci d'avance.
Modifié par vxg_vxg (12 Oct 2007 - 15:59)

Plop,

Un p'tit bout de code, une page en ligne pour voir ce qui ne "marche pas" ?

Sinon, au lieu de modifier la backgroundPosition depuis javascript, tu peux essayer de modifier la class de tes éléments depuis javascript.
Par exemple définir une classe .actif en CSS avec un background-position: modifié et ajouter/supprimer cette classe sur l'élément lors du clic.
Modifié par Tymlis (10 Oct 2007 - 12:07)

Bonjour,
je pense que ça peut se faire en CSS avec la technique des portes coulissantes
avec regroupement des 2 images a et a:hover en une seule et remplacement d'image pour a:actif
Modifié par chmel (10 Oct 2007 - 13:04)

merci chmel,

j'ai separé mon image en 3x2(inactif+hover) + 3x1(actif)

Bon du coup j'ai 6 images au lieu d'une, ca fait moins optimiser, mais on peut pas toujours avoir le beurre et l'argent du beurre.

Reste le conflit javascript/ css ...

a mon avis

document.getElementById('myid').style.backgroundPosition

est appliqué a "a#myid","a:hover#myid", il faudrait une fonction du genre

free_style.backgroundposition

Ca existe a en JS ?

Donne nous le code complet JS...

FlorentG a écrit :
Donne nous le code complet JS...

###########
CSS
###########

a#myid1 { background-position : 0px -40px }
a:hover#myid1 {	background-position : 0px -80px }

a#myid2 { background-position : -35px -40px }
a:hover#myid2 {	background-position : -35px -80px }

###########
HTML
###########

<a id="myid1" href="#" onClick="myfunc('myid1')">blabla</a>
<a id="myid2" href="#" onClick="myfunc('myid2')">blabla</a>


###########
JS
###########

myfunc(iid)
{
	switch (iid)
	{
		case 'myid1' :
			document.getElementById('myid1').style.backgroundPosition = '0px 0px';
			document.getElementById('myid2').style.backgroundPosition = '-35px -40px';
		break;
		case 'myid2' :
			document.getElementById('myid2').style.backgroundPosition = '-35px 0px';
			document.getElementById('myid1').style.backgroundPosition = '0px -40px';
		break;
	}
}

0px : actif
-40px : inactif
-80px : hover

Des que je clique sur l'un des lien, le style hover ne fonctionne plus.

Quand je clique le premier lien je repasse le 2eme en inactif (-40px) au cas ou il etait actif.

L'attribut style (définit quand tu utilise machin.style.xxx) prévaut toujours sur la déclaration dans un CSS séparé.

Donc ce qu'il se passe, c'est que le backgroundPosition est redéfini aussi bien pour l'état normal (après le click) que pour le hover. Donc quand tu hover, il va utiliser ce que t'as définit dans ton JS

Tu peux utiliser onmouseover pour simuler un hover, je pense c'est le mieux
Modifié par FlorentG (11 Oct 2007 - 18:12)