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+")";
}
}
}
Petites informations :
url de départ = http//localhost/monsite/categorie1.php?choix=tous
url après clique = http://localhost/monsite/categorie1.php?choix=onglet_choisi
