Bonsoir à tous,

Alors voilà, je planche depuis maintenant pas mal de temps sur un problème javascript qui me prend la tête !

J'ai un menu géré dont les onglets ont pour background-Image :

- Une image nommé off (lorsque l'onglet n'est pas survolé)
- une image nommé on (lorsque l'onglet est survolé)

ce que je souhaite faire :

Lorsque l'utilisateur clique sur un onglet, le background-Image doit resté en on. Cela afin d'indiquer à l'utilisateur sur quelle page il se trouve.

J'ai donc pensé au javascript pour gérer le background-Image avec l'évènement onClick.

Lorsque l'utilisateur clique sur un onglet, la fonction javascript enCours() s'exécute.

Voici la fonction enCours() :

function enCours(){
	//Permet de récupérer le nom de l'onglet
	var url = document.location.href;
	var indiceChoix = url.lastIndexOf('?')+7;
	var total = url.length;
	
	var choix = url.substring(indiceChoix,total);
	
	//permet de récupérer le nom de la page
	var indiceFinCat = url.lastIndexOf('.');
	var indiceDebCat = url.lastIndexOf('/')+1;
	
	var cat = url.substring(indiceDebCat,indiceFinCat);
	
	//Parcours de tous les éléments <li> de la page ayant pour id="li_le_nom_de_l_onglet"
	var liste = document.getElementsByTagName('li');
	var nomId = "li_"+choix;
	
	for(i=0; i<liste.length; i++){
		if(liste[i].id == nomId){//Si l'id <li> parcouru = choix alors on modifie le backgroundImage 
			var chemin = "../img/gabarits/interne_categorie/"+cat+"/on/"+choix+".gif";
			document.getElementById(nomId).style.backgroundImage="url("+chemin+")";
		}
	}
}

#categorie1 #li_tous{
	background-image:url(../img/gabarits/interne_categorie/categorie1/off/tout.gif);
	background-repeat:no-repeat;
	width:154px;
	height:27px;
}

#categorie1 #li_tous:hover{
	background-image:url(../img/gabarits/interne_categorie/categorie1/on/tout.gif);
}

Configuration: Windows Vista
Firefox 3.0.8