AccueilDernières imagesRechercherS'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.

Le Deal du moment : -20%
-20% sur le Lot de 2 écrans PC GIGABYTE ...
Voir le deal
429 €

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

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    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



    sign
    Sui'
    Sui'
    MasculinAge : 32Messages : 1865

    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 *-*
    navigation - Rollover sur la navigation [simple - toute version de forum] 657955SignatureSuicopie
    Sui' Art's
    Anonymous
    Invité

    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!
    Malizia.
    Malizia.
    FémininAge : 28Messages : 90

    Mar 15 Nov 2011 - 23:08

    Pourrait-il y avoir un aperçu du résultat ? >w<
    Sinon, super ! ♥ [+1]
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    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.



    sign
    Freak
    Freak
    FémininAge : 33Messages : 27

    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
    Ryosaki
    Ryosaki
    MasculinAge : 31Messages : 109

    Sam 23 Juin 2012 - 19:29

    merci



    navigation - Rollover sur la navigation [simple - toute version de forum] Tutog
    Laega
    Laega
    FémininAge : 34Messages : 106

    Dim 12 Aoû 2012 - 21:58

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

    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)?
    Shuu-Shuu
    Shuu-Shuu
    FémininAge : 27Messages : 199

    Mar 22 Oct 2013 - 10:12

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

    Mar 22 Oct 2013 - 11:00

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



    navigation - Rollover sur la navigation [simple - toute version de forum] Kit_si10
    Neva
    Neva
    FémininAge : 32Messages : 18565

    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



     
    Whitemoon
    Whitemoon
    FémininAge : 23Messages : 695

    Mar 22 Oct 2013 - 21:03

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



    navigation - Rollover sur la navigation [simple - toute version de forum] Kit_si10
    rhino
    rhino
    MasculinAge : 28Messages : 25

    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 
    Alec Sing Toa
    Alec Sing Toa
    FémininAge : 32Messages : 75

    Mer 9 Avr 2014 - 17:44

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

    Dim 11 Jan 2015 - 10:02

    merci
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Dim 11 Jan 2015 - 10:53

    merci :) à vous



    Patricia :)
    LeMonarque
    LeMonarque
    MasculinAge : 37Messages : 26

    Sam 13 Aoû 2016 - 12:26

    Merci
    Anonymous
    Invité

    Sam 13 Aoû 2016 - 13:10

    Merci pour le partage !
    Ornicar
    Ornicar
    MasculinAge : 28Messages : 37

    Sam 7 Oct 2017 - 16:49

    Merci !
    Toxinou
    Toxinou
    FémininAge : 32Messages : 41

    Ven 27 Oct 2017 - 8:39

    Merci du partage :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 0:40