Javascript : pb de changement backgroundImage
axelandre
-
Utilisateur anonyme -
Utilisateur anonyme -
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() :
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
les background-Image sont gérés ainsi :
Chaque onglet est construit de cette façon.
Et donc au final mon code javascript ne fonctionne pas (aucun effet)!!!
Si quelqu'un à la solution à mon problème je suis preneur !
Merci beaucoup
Si vous avez besoin de plus de précision dites-le moi !
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
les background-Image sont gérés ainsi :
#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);
}
Chaque onglet est construit de cette façon.
Et donc au final mon code javascript ne fonctionne pas (aucun effet)!!!
Si quelqu'un à la solution à mon problème je suis preneur !
Merci beaucoup
Si vous avez besoin de plus de précision dites-le moi !
A voir également:
- Javascript : pb de changement backgroundImage
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Javascript arrondi - Forum Javascript
- Javascript arrondi après la virgule ✓ - Forum Windows