Rollover sur la navigation [simple - toute version de forum]

Salut à tous !

Voici une méthode déjà connue mais bien pratique pour afficher une barre de navigation en rollover (avec image changeant au survol de la souris donc) très simplement, sans toucher aux templates, juste en modifiant le CSS de votre forum.
Cette astuce a le gros avantage de fonctionner sur toutes les versions de forum (du moins celles sorties pour le moment^^), ainsi que de pouvoir d'appliquer aux boutons de base et donc d'avoir le changement d'image pour les nouveaux MP par exemple^^

Principe :
Nous allons mettre les images directement via le css et afficher une image différente pour le lien "neutre" et le lien survolé.

• Commencez par enlever toutes les images de votre barre de navigation et allez dans :
Affichage > Page d'accueil > En-tête & navigation
Et sélectionnez "oui" dans "Afficher seulement des images dans la barre de navigation".

• Allez ensuite dans votre feuille CSS de forum (je rappelle qu'elle se situe dans "Affichage" > "Couleur" Onglet "Feuille CSS"). Je vous donne l'exemple pour le bouton "Accueil" (l'index, selon vos appellations) :

Code:

#i_icon_mini_index
{
background-image: url(adresse de l'image);
width: 80px;
height: 30px;
}
#i_icon_mini_index:hover
{
background-image: url(adresse de l'image);
}

Je vous explique ce que signifie ce code :
- l'information avec # c'est le nom du bouton accueil, pour résumer, les informations entre {} sont donc interprétées comme s'appliquant forcément à ce bouton là et pas un autre.
- le "background-image" c'est simplement l'image de fond du lien (rassurez-vous, le lien sera toujours là^^). Il vous faudra donc héberger l'image voulue et mettre l'adresse entre les parenthèses.
- width : c'est la largeur de l'emplacement de l'image, autrement dit celle de l'image elle-même.
- height : c'est la hauteur de l'image.
- la seconde partie avec le nom de la zone # suivie de "hover" désigne la même zone une fois survolée, il vous faut donc mettre dans "background-image" l'adresse de l'image devant apparaitre lorsque l'on passe sur le lien avec la souris.
Remarque : il n'est pas nécessaire de remettre la taille pour le "hover".

• Normalement, vous devez avoir votre bouton "Accueil" placé. Il s'agit maintenant de faire la même chose avec tout les autres ! Je vous donne simplement le nom de la "division" (zone de chaque bouton), à vous de refaire pareil que précédemment avec les images correspondantes.

Code:

Accueil : #i_icon_mini_index / #i_icon_mini_index:hover
Portail : #i_icon_mini_portal / #i_icon_mini_portal:hover
Galerie : #i_icon_mini_gallery / #i_icon_mini_gallery:hover
Calendrier : #i_icon_mini_calendar / #i_icon_mini_calendar:hover
FAQ : #i_icon_mini_faq / #i_icon_mini_faq:hover
Rechercher : #i_icon_mini_search / #i_icon_mini_search:hover
Membres : #i_icon_mini_members / #i_icon_mini_members:hover
Groupes : #i_icon_mini_groups / #i_icon_mini_groups:hover
Profil : #i_icon_mini_profile / #i_icon_mini_profile:hover
Message privé : #i_icon_mini_message / #i_icon_mini_message:hover
Nouveau message privé : #i_icon_mini_new_message / #i_icon_mini_new_message:hover
Se déconnecter : #i_icon_mini_logout / #i_icon_mini_logout:hover
S'enregistrer : #i_icon_mini_register / #i_icon_mini_register:hover
Se connecter : #i_icon_mini_login / #i_icon_mini_login:hover

En espérant que ce code vous serve !

Ah bah ca va être utile une personne chercher cet astuce sur le forum ^^.

Merci du partage Captain .

Merci pour le partage! ça donne un super résultat sur mon forum.
Je pense que ça mérite largement un +1!

Pourrait-il y avoir un aperçu du résultat ? >w<
Sinon, super ! ♥ [+1]

C'est simplement pour que l'image de navigation change^^ Tu dois en faire deux, une normale un pour le survol, tout simplement, de même taille par contre.

Je viens de mettre ça en place sur mon forum ça marche du tonnerre !

Merci beaucoup pour le partage !

merci

Mirci pour se super tuto Sparrow ^^

Bonjour, j'aurais une question:
cette technique fonctionne-t-elle également pour les liens de menu personnalisés (c'est à dire rajouter un bouton supplémentaire dans le menu)?

Oh yeah ! Merci beaucoup pour le partage :=D !

Je comprends pas trop le fonctionnement, y'aurait-il un exemple où on peut voir le résultat ?

Salut,

Je n'ai pas de forum avec ce script sous la main mais, en fait, le code change l'image quand ta souris est dessus. Tu as une image X qui s'affiche en tant normal mais quand tu mets ta souris sur l'image c'est l'image Y qui s'affiche (c'est comme le fait qu'un lien change de couleur quand tu mets ta souris dessus)

C'est un peu plus clair ? :s

Merci c'est plus clair maintenant ^^
Ce code me servira finalement, merci à vous deux ^^

Merci beaucoup !!! Très utile !    J'aurais aimer faire un effet de rollover sur les boutons "nouveau sujet", "citer", etc. sur mon forum... Y a t-il un moyen de récupérer l'id de ces icones ? Merci d'avance   

Facile à comprendre et très utile pour personnifier sa barre de navigation, un grand merci ^^

merci

merci :) à vous

Merci

Merci pour le partage !

Merci !

Merci du partage :)