Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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
    MasculinAge : 31Message(s) : 31634

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    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 !


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


    MasculinAge : 24Message(s) : 1865
    Sui'
    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
    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!
    FémininAge : 20Message(s) : 78
    Malizia.
    le Mar 15 Nov 2011 - 23:08
    Pourrait-il y avoir un aperçu du résultat ? >w<
    Sinon, super ! ♥ [+1]
    MasculinAge : 31Message(s) : 31634

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    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.


    FémininAge : 25Message(s) : 27
    Freak
    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
    MasculinAge : 24Message(s) : 109
    Ryosaki
    le Sam 23 Juin 2012 - 19:29
    merci


    FémininAge : 26Message(s) : 106

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Laega
    le Dim 12 Aoû 2012 - 21:58
    Mirci pour se super tuto Sparrow ^^
    MasculinAge : 23Message(s) : 70
    Seiden.
    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)?
    FémininAge : 20Message(s) : 196
    Shuu-Shuu
    le Mar 22 Oct 2013 - 10:12
    Oh yeah ! Merci beaucoup pour le partage :=D !
    FémininAge : 16Message(s) : 695

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    3/10  (3/10)
    Whitemoon
    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 ?


    FémininAge : 25Message(s) : 18541

    Les Guildes
    Guilde des Conteurs:
    4/10  (4/10)
    Guilde des Illusionnistes:
    3/10  (3/10)
    Guilde des Architectes:
    4/10  (4/10)
    Neva
    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


     

    • Pensez à aller accueillir les nouveaux nutopiens
    • La Chatbox anniversaire existe toujours ! Elle est ici pour les amoureux des navires  

    FémininAge : 16Message(s) : 695

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    3/10  (3/10)
    Whitemoon
    le Mar 22 Oct 2013 - 21:03
    Merci c'est plus clair maintenant ^^
    Ce code me servira finalement, merci à vous deux ^^


    MasculinAge : 21Message(s) : 25

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    rhino
    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 
    FémininAge : 24Message(s) : 54
    Alec Sing Toa
    le Mer 9 Avr 2014 - 17:44
    Facile à comprendre et très utile pour personnifier sa barre de navigation, un grand merci ^^
    MasculinAge : 20Message(s) : 84
    Fayzl4D
    le Dim 11 Jan 2015 - 10:02
    merci
    FémininAge : 53Message(s) : 230
    patriciadpt30
    le Dim 11 Jan 2015 - 10:53
    merci :) à vous


    Patricia :)
    MasculinAge : 30Message(s) : 25
    LeMonarque
    le Sam 13 Aoû 2016 - 12:26
    Merci
    FémininAge : 24Message(s) : 1353

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Sam 13 Aoû 2016 - 13:10
    Merci pour le partage !
    Contenu sponsorisé
    Aujourd'hui à 9:08

      La date/heure actuelle est Dim 25 Sep 2016 - 9:08