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

Changer l'img bg d'un onglet lorsqu'on clique dessus - HTML/CSS - Programmation

Marsh Posté le 19-01-2010 à 20:33:10    

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 :
  1. <ul id="menu1" style="font-family:"Arial"">
  2.   <li><a href="index.php?lien=accueil">Accueil</a></li>
  3.             <li><a href="index.php?lien=ceics">Le CEICS</a></li>
  4.             <li><a href="index.php">Ev&egrave;nements notables</a>
  5.             <ul id="menu2">
  6.             <li><a href="index.php?lien=ski"><center>S&eacute;jour au Ski</center></a></li>
  7.             <li><a href="index.php?lien=bal"><center>Bal de l'IHECS</center></a></li>
  8.             <li><a href="index.php?lien=ndm"><center>Nuit des M&eacute;dias</center></a></li>
  9.             </ul>
  10.             </li>
  11.             <li><a href="index.php?lien=elections">Elections</a></li>
  12.   <li><a href="index.php?lien=membres">Membres</a></li>
  13.   <li><a href="index.php?lien=agenda">Agenda</a></li>
  14.   <li><a href="index.php?lien=photos">Photos</a></li>
  15.   <li><a href="http://ceics.lolforum.net" target="_blank">Forum</a></li>
  16.    <li><a href="index.php?lien=liens">Liens</a></li>
  17.  </ul>
  20. #menu1 {
  21. height:35px;
  22. line-height:35px;
  23. background:url(images/bg-menu.png) repeat-x;
  24. padding:0 10px;s
  25. font-size: 10pt;
  26. font-family:"Arial";
  27. }
  28. #menu1 ul {
  29. list-style-type:none;
  30. }
  31. #menu1 li {
  32. float:left;
  33. }
  34. #menu1 li a {
  35. padding:0 15px;
  36. display:block;
  37. color:#ffffff;
  38. margin-right:2px;
  39. }
  40. #menu1 li a:hover {
  41. background:url(images/bg-menu-hover.png) no-repeat center center;
  42. }
  44. #menu2 ul {
  45. list-style-type:none;
  46. }
  47. #menu2 li {
  48. float:center;
  49. width:142px;
  50. }
  51. #menu2 li a {
  52. padding:0 15px;
  53. display:block;
  54. color:#ffffff;
  55. margin-right:2px;
  56. }
  57. #menu2 li a:hover {
  58. background:url(images/bg-menu-hover2.png) no-repeat center center;
  59. width:auto;
  60. }


 
 
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!

Reply

Marsh Posté le 19-01-2010 à 20:33:10   

Reply

Marsh Posté le 20-01-2010 à 11:36:13    

Personne?

Reply

Marsh Posté le 20-01-2010 à 12:18:33    

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".

Reply

Marsh Posté le 20-01-2010 à 12:22:30    

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.

Reply

Marsh Posté le 20-01-2010 à 17:32:52    

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 :
  1. <ul id="menu1" style="font-family:"Arial"">
  2.   <li class="<? if ($page="accueil" ) print("active" ); ?>"><a href="index.php?lien=accueil">Accueil</a></li>
  3.             <li class="<? if ($page="ceics" ) print("active" ); ?>"><a href="index.php?lien=ceics">Le CEICS</a></li>
  4.             <li><a href="index.php">Evènements notables</a>
  5.             <ul id="menu2">
  6.             <li class="<? if ($page="ski" ) print("active" ); ?>"><a href="index.php?lien=ski"><center>Séjour au Ski</center></a></li>
  7.             <li class="<? if ($page="bal" ) print("active" ); ?>"><a href="index.php?lien=bal"><center>Bal de l'IHECS</center></a></li>
  8.             <li class="<? if ($page="ndm" ) print("active" ); ?>"><a href="index.php?lien=ndm"><center>Nuit des Médias</center></a></li>
  9.             </ul>
  10.             </li>
  11. </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...

Reply

Marsh Posté le 20-01-2010 à 21:18:59    

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; ?>

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed