AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


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

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Jeu 22 Juil 2010 - 18:15



    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 !

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Sparrow-style le Mer 13 Juin 2012 - 23:06, édité 1 fois



    avatar
    Sui'
    MasculinAge : 25Messages : 1865

    le Jeu 22 Juil 2010 - 18:58

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

    Merci du partage Captain Wink.



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    avatar
    Invité

    le Lun 27 Déc 2010 - 0:20

    Merci pour le partage! ça donne un super résultat sur mon forum.
    Je pense que ça mérite largement un +1!
    avatar
    Malizia.
    FémininAge : 21Messages : 90

    le Mar 15 Nov 2011 - 23:08

    Pourrait-il y avoir un aperçu du résultat ? >w<
    Sinon, super ! ♥ [+1]
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mar 15 Nov 2011 - 23:40

    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.



    avatar
    Freak
    FémininAge : 26Messages : 27

    le Ven 1 Juin 2012 - 22:37

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

    Merci beaucoup pour le partage !



    Image hébergée par servimg.com
    avatar
    Ryosaki
    MasculinAge : 25Messages : 109

    le Sam 23 Juin 2012 - 19:29

    merci



    avatar
    Laega
    FémininAge : 28Messages : 106

    le Dim 12 Aoû 2012 - 21:58

    Mirci pour se super tuto Sparrow ^^
    avatar
    Seiden.
    MasculinAge : 24Messages : 70

    le Jeu 17 Oct 2013 - 15:50

    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)?
    avatar
    Shuu-Shuu
    FémininAge : 21Messages : 196

    le Mar 22 Oct 2013 - 10:12

    Oh yeah ! Merci beaucoup pour le partage :=D !
    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Mar 22 Oct 2013 - 11:00

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



    avatar
    Neva
    FémininAge : 26Messages : 18564

    le Mar 22 Oct 2013 - 20:15

    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



     
    avatar
    Whitemoon
    FémininAge : 17Messages : 695

    le Mar 22 Oct 2013 - 21:03

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



    avatar
    rhino
    MasculinAge : 22Messages : 25

    le Lun 9 Déc 2013 - 21:52

    Merci beaucoup !!! Très utile !  Very Happy  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  Razz 
    avatar
    Alec Sing Toa
    FémininAge : 25Messages : 72

    le Mer 9 Avr 2014 - 17:44

    Facile à comprendre et très utile pour personnifier sa barre de navigation, un grand merci ^^
    avatar
    Fayzl4D
    MasculinAge : 21Messages : 84

    le Dim 11 Jan 2015 - 10:02

    merci
    avatar
    patriciadpt30
    FémininAge : 54Messages : 240

    le Dim 11 Jan 2015 - 10:53

    merci :) à vous



    Patricia :)
    avatar
    LeMonarque
    MasculinAge : 31Messages : 26

    le Sam 13 Aoû 2016 - 12:26

    Merci
    avatar
    Kelalin
    FémininAge : 25Messages : 1681

    le Sam 13 Aoû 2016 - 13:10

    Merci pour le partage !
    avatar
    Ornicar
    MasculinAge : 21Messages : 37

    le Sam 7 Oct 2017 - 16:49

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Lun 23 Oct 2017 - 2:37