Changer l'img bg d'un onglet lorsqu'on clique dessus

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Changer l'img bg d'un onglet lorsqu'on clique dessus

ishanshade

Bonjour,

Voilà, je suis confronté à un petit problème.

Le menu de mon site est sous forme d'onglet (chacun ayant une image background qui change en fonction du hover)

J'aimerais qu'à chaque fois qu'on atterrit sur une nouvelle page (via ces onglets), le background de l'onglet passe de menu-bg.png à menu-hover.png

Ce menu onglet étant codé sur ma page index.php, il ne m'est pas possible de modifier cela manuellement pour chacune des pages, vu que je fais appel aux pages via un include (et donc index.php?lien=page**)

Ainsi, dans mon Menu, nous avons

Rubrique1 ; Rubrique2 ; Rubrique 3

Voici le code de mon menu + le CSS correspondant

Code :

<ul id="menu1" style="font-family:"Arial"">
<li><a href="index.php?lien=accueil">Accueil</a></li>
<li><a href="index.php?lien=ceics">Le CEICS</a></li>
<li><a href="index.php">Evènements notables</a>
<ul id="menu2">
<li><a href="index.php?lien=ski"><center>Séjour au Ski</center></a></li>
<li><a href="index.php?lien=bal"><center>Bal de l'IHECS</center></a></li>
<li><a href="index.php?lien=ndm"><center>Nuit des Médias</center></a></li>
</ul>
</li>
<li><a href="index.php?lien=elections">Elections</a></li>
<li><a href="index.php?lien=membres">Membres</a></li>
<li><a href="index.php?lien=agenda">Agenda</a></li>
<li><a href="index.php?lien=photos">Photos</a></li>
<li><a href="http://ceics.lolforum.net" target="_blank">Forum</a></li>
<li><a href="index.php?lien=liens">Liens</a></li>
</ul>
#menu1 {
height:35px;
line-height:35px;
background:url(images/bg-menu.png) repeat-x;
padding:0 10px;s
font-size: 10pt;
font-family:"Arial";
}
#menu1 ul {
list-style-type:none;
}
#menu1 li {
float:left;
}
#menu1 li a {
padding:0 15px;
display:block;
color:#ffffff;
margin-right:2px;
}
#menu1 li a:hover {
background:url(images/bg-menu-hover.png) no-repeat center center;
}
#menu2 ul {
list-style-type:none;
}
#menu2 li {
float:center;
width:142px;
}
#menu2 li a {
padding:0 15px;
display:block;
color:#ffffff;
margin-right:2px;
}
#menu2 li a:hover {
background:url(images/bg-menu-hover2.png) no-repeat center center;
width:auto;
}

Si je clic sur Rubrique 2, j'aimerais que l'onglet change (que son background devienne bg-menu-hover.png au lieu de bg-menu.png), afin que l'internaute sache exactement où il est sur le site

Je ne sais pas si je me fais bien comprendre en fait...

Enfin, d'avance merci pour vos réponses!

Publicité

ishanshade

Personne?

pataluc

il faut que tu rajoute une classe genre ".active" à l'onglet ouvert (que tu connais forcément puisque tu fais un include juste après). ensutie tu redéfini le background:url pour la classe ".active".

ishanshade

Merci pour la réponse

Malheureusement, je ne connais pas l'onglet ouvert, vu que mon menu se situe dans la page index.php, et c'est à partir de cette page index.php que je fais un include vers une page quelconque.

Ainsi, si on prend la page "liens.php", elle ne contient que le contenu de la page.

pataluc

si tu fais un include c'est bien que tu sais quelle page va être appelée non? donc tu fais un truc du genre:

Code :

<ul id="menu1" style="font-family:"Arial"">
<li class="<? if ($page="accueil" ) print("active" ); ?>"><a href="index.php?lien=accueil">Accueil</a></li>
<li class="<? if ($page="ceics" ) print("active" ); ?>"><a href="index.php?lien=ceics">Le CEICS</a></li>
<li><a href="index.php">Evènements notables</a>
<ul id="menu2">
<li class="<? if ($page="ski" ) print("active" ); ?>"><a href="index.php?lien=ski"><center>Séjour au Ski</center></a></li>
<li class="<? if ($page="bal" ) print("active" ); ?>"><a href="index.php?lien=bal"><center>Bal de l'IHECS</center></a></li>
<li class="<? if ($page="ndm" ) print("active" ); ?>"><a href="index.php?lien=ndm"><center>Nuit des Médias</center></a></li>
</ul>
</li>
</ul>

etc...

[HS]après j'aime pas cette manière d'inclure le body de la page, je préfère avoir des pages qui appellent leur header/footer, mais c'est mon avis perso...

ishanshade

Quand je fais ça, voilà l'erreur que j'obtiens:

Warning: main(agenda) [function.main]: failed to open stream: No such file or directory in /homez.65/ceics/www/test/index.php on line 58

Warning: main() [function.include]: Failed opening 'agenda' for inclusion (include_path='.usr/local/lib/php') in /homez.65/ceics/www/test/index.php on line 58

Et la ligne 58 de mon index.php est justement:

<?php include $page; ?>

FORUM HardWare.fr

Programmation

HTML/CSS

Changer l'img bg d'un onglet lorsqu'on clique dessus

Sujets relatifs
changer un ordre d'affichage	modifier ce script de menu avec onglet actif
[VBA Excel] Changer la couleur suite a une formule	shell simple pour changer de repertoire
Changer la langue du plug-in SVN subversion pour Eclipse ?	changer l'action onclik
Changer dynamiquement le wmode des flash	Poster un formulaire quand on clique sur un bouton radio
problème crash Excel 2000 après supression d'un onglet	clique droit listenner
Plus de sujets relatifs à : Changer l'img bg d'un onglet lorsqu'on clique dessus

Page générée en 0.057 secondes