[CSS] Barre de navigation en image qui change au survol

Bonjour bonjour

Voilà un tutoriel qui va te permettre de personnaliser ta barre de navigation en CSS facilement : ici on va créer des boutons qui changent au survol

 Ce tutoriel est compatible avec toutes les versions.
Vous n'avez pas besoin de l'accès aux templates. Seul l'accès à la CSS est nécessaire


Pour faire un test, j'ai créé une partie d'une barre de navigation et de deux couleurs différentes pour qu'on voit bien la différence
On va donc mettre nos 2 barres bien l'une en dessous de l'autre avec notre logiciel et sur la même image. On a donc ceci :

Spoiler:

Et maintenant on va découper chaque double-bouton (ici j'en ai fait qu'un pour vous montrer) :

Spoiler:

La partie graphique est terminée. Bien sûr, pour ton résultat final il faut bien tout travailler comme tu le souhaites.


Il ne nous reste plus qu'à l'installer et là, ça va se passer en CSS.
Chaque image de la barre de navigation a une id qui lui appartient, on va donc s'en servir. Pour mon exemple je prends le bouton "messagerie" : l'id qui lui correspond est :

Code:

i_icon_mini_message

   Du coup on va lui dire quoi faire :

Code:

a.mainmenu img#i_icon_mini_message{
width:Xpx;
height:Ypx;
background:transparent url('https://2img.net/h/oi62.tinypic.com/244895v.jpg') no-repeat left 0;
}

On traduit : tu prends les liens de la barre de navigation ( a.mainmenu ) et à l'image qui a l'id i_icon_mini_message ( img#i_icon_mini_message tu appliques une largeur de Xpx ( width:146px; ) une hauteur de Ypx ( height:50px; ) et un fond qui n'a pas de couleur, qui est une image, qui ne se répète pas, qui est serré à gauche et à 0px du haut ( background:transparent url('https://2img.net/h/oi62.tinypic.com/244895v.jpg') no-repeat left 0 )

Et ensuite on fait la même chose pour le survol : on prend le a.mainmenu:hover .

Code:

a.mainmenu:hover img#i_icon_mini_message{width:Xpx;
height:Ypx;
background:transparent url('https://2img.net/h/oi62.tinypic.com/244895v.jpg') no-repeat left -Ypx;
}  

ici on le place à -Ypx du haut pour que ce soit la partie basse de notre bouton qui se voit.

Ici, pense bien à bien modifier les X, Y et liens par les bonnes valeurs  
Pour moi ça donne donc :

Code:

a.mainmenu img#i_icon_mini_message{width:146px;height:50px;background:transparent url('https://2img.net/h/oi62.tinypic.com/244895v.jpg') no-repeat left 0;}
    a.mainmenu:hover img#i_icon_mini_message{width:146px;height:50px;background:transparent url('https://2img.net/h/oi62.tinypic.com/244895v.jpg') no-repeat left -50px;}

Et tu peux tester : ça fonctionne ! Tu passes parfaitement du noir au rouge sans délai  


Pour les trouver, il faut regarder les codes sources. Mais comme on est gentil, je les ai cherchés pour vous  

• Accueil : i_icon_mini_index
  
• Portail : i_icon_mini_portal
  
• Calendrier : i_icon_mini_calendar
  
• FAQ : i_icon_mini_faq
  
• Rechercher : i_icon_mini_search
  
• Membres : i_icon_mini_members
  
• Groupes : i_icon_mini_groups
  
• Profil : i_icon_mini_profile
  
• Messagerie : i_icon_mini_message
  
• Nouveaux messages : i_icon_mini_new_message
  
• Inscription : i_icon_mini_register
  
• Connexion : i_icon_mini_login
  
• Déconnexion : i_icon_mini_logout
  

---

Et voilà, tu peux personnaliser ta barre de navigation sans t'embêter avec les templates ! Facile n'est-ce pas ?

Bien entendu, grâce à ces id, tu peux personnaliser ta barre à gogo !
N'hésites pas à poser tes questions si tu en as