Images de la Barre de Navigation modifiées au passage de la souris

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Images de la Barre de Navigation modifiées au passage de la souris

Message par Narumi Jeu 27 Aoû 2009 - 11:00

Personnalisation de la barre de navigation

Dans ce tutoriel nous apprendrons à créer une barre de navigation qui réagit au passage de la souris. Pour faire simple, nous allons réaliser une barre de navigation dont chaque images (représentant chacune, un lien) réagit lorsque l'on passe la souris dessus.

Voir illustration :

Pré-Requis : HTML et CSS


Il s'agit des deux langages les plus courants dans la création de page WEB statique. Le HTML est en quelques sortes le squelette de la page, le code qui la hiérarchise. Et le CSS, c'est l'habillage, les fonds, les couleurs, "la décoration". Dans ce tutoriel, nous n'utiliserons que du HTML et du CSS, pas de PHP, ni de Flash, et encore moins du Javascript (JS).

Où placer le CSS ?


Une feuille de style est mise à la disposition des utilisateurs de Forumactif. C'est dans cette feuille de style que nous placerons l'intégralité de notre CSS.

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Les attributs CSS que nous allons utiliser ?


Width & Height
Images de la Barre de Navigation modifiées au passage de la souris Wh10
- Width : détermine la largeur | Valeur : nombre en px ici.
- Height : détermine la hauteur | Valeur : nombre en px ici.
Background-image- Permet d'afficher une image en fond | Valeur : url('https://...').

Le pseudo-élément :hover


C'est l'élément qui régit la façon dont le bloc réagit au passage de la souris : "Désigne l'élément sur lequel la souris est en train de passer." C'est ce pseudo-élément que nous allons utiliser.

Les différentes étapes à suivre


  1. Vous devez réaliser les images qui vous servirons. Une image pour chaque lien, et une image pour chaque lien survolé.

  2. Désactiver le texte dans la Barre de navigation, afin d'éviter "Images de la Barre de Navigation modifiées au passage de la souris Icon_home Accueil" :

    Panneau d'administration  Affichage  Page d'accueil - En-tête & Navigation

    N'afficher que des images dans la barre de navigation : cliquez sur OUI.

    N'oubliez pas de cliquer sur le bouton :enreg: afin de sauvegarder les modifications.

  3. Dans :

    Panneau d'administration  Affichage  Images et Couleurs - Gestion des images (mode avancé)

    Remplacer l'adresse des images relatives à : Index, Galerie, Calendrier, Portail, FAQ, Publications, Evènements, Rechercher, Membres, Groupes, Editer Profil, Messages Privés, Nouveaux Messages Privés, S'enregistrer, Connexion, Déconnexion par l'adresse suivante :

    Code:
    https://2img.net/i/fa/empty.gif

    N'oubliez pas de cliquer sur le bouton :enreg: afin de sauvegarder les modifications.

  4. Les identifiants, id="..." : les identifiants sont liés aux images pour la Barre de navigation, c'est à ces identifiants que nous affecterons le code CSS.

    IconesIdentifiant (type #)Description
    Images de la Barre de Navigation modifiées au passage de la souris Icon_home#i_icon_mini_indeId. de l'image du lien Index
    Images de la Barre de Navigation modifiées au passage de la souris Icon_c10#i_icon_mini_calendarId. de l'image du lien Calendrier
    Images de la Barre de Navigation modifiées au passage de la souris Icon_portal#i_icon_mini_portalId. de l'image du lien Portail
    Images de la Barre de Navigation modifiées au passage de la souris Icon_faq#i_icon_mini_faqId. de l'image du lien FAQ
    Images de la Barre de Navigation modifiées au passage de la souris Icon_search#i_icon_mini_searchId. de l'image du lien Rechercher
    Images de la Barre de Navigation modifiées au passage de la souris Icon_members#i_icon_mini_membersId. de l'image du lien Membres
    Images de la Barre de Navigation modifiées au passage de la souris Icon_groups#i_icon_mini_groupsId. de l'image du lien Groupes
    Images de la Barre de Navigation modifiées au passage de la souris Icon_ucp#i_icon_mini_profileId. de l'image du lien Profil
    Images de la Barre de Navigation modifiées au passage de la souris Icon_message#i_icon_mini_messageId. de l'image du lien MP
    Images de la Barre de Navigation modifiées au passage de la souris Icon_message#i_icon_mini_new_messageId. de l'image du lien Nouveaux MP
    Images de la Barre de Navigation modifiées au passage de la souris Icon_logout#i_icon_mini_logoutId. de l'image du lien Déconnexion
    Images de la Barre de Navigation modifiées au passage de la souris Icon_logout#i_icon_mini_loginId. de l'image du lien Connexion
    Images de la Barre de Navigation modifiées au passage de la souris Icon_register#i_icon_mini_registerId. de l'image du lien S'enregistrer
    Images de la Barre de Navigation modifiées au passage de la souris Icon_gallery#i_icon_mini_galleryId. de l'image du lien Galerie
    Images de la Barre de Navigation modifiées au passage de la souris Icon_event#i_icon_mini_eventId. de l'image du lien Evènements
    Images de la Barre de Navigation modifiées au passage de la souris Icon_publication#i_icon_mini_publicationId. de l'image du lien Publications

  5. Le code CSS : ce code est à intégrer dans la feuille de style CSS de votre forum :

    Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

    Vous n'avez qu'à vous laisser guider par les indications entre /* */ :

    Code:
    /*IMAGE INDEX*/
    #i_icon_mini_index{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_index:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE PORTAIL*/
    #i_icon_mini_portal{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_portal:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE CALENDRIER*/
    #i_icon_mini_calendar{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_calendar:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE FAQ*/
    #i_icon_mini_faq{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_faq:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE RECHERCHE*/
    #i_icon_mini_search{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_search:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE LISTE MEMBRES*/
    #i_icon_mini_members{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_members:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE GROUPES*/
    #i_icon_mini_groups{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_groups:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE PROFIL*/
    #i_icon_mini_profile{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_profile:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE MP (pas de nouveaux messages)*/
    #i_icon_mini_message{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_message:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE MP (nouveaux messages)*/
    #i_icon_mini_new_message{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_new_message:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE DECONEXION*/
    #i_icon_mini_logout{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_logout:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE S'ENREGISTRER*/
    #i_icon_mini_register{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_register:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE CONNEXION*/
    #i_icon_mini_login{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_login:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE GALERIE*/
    #i_icon_mini_gallery{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_gallery:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE PUBLICATIONS*/
    #i_icon_mini_publication{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    #i_icon_mini_publication:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    /*IMAGE EVENEMENTS*/
    #i#i_icon_mini_event{
      background-image:url('URL'); /*image si la souris ne survole pas*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }
    ##i_icon_mini_event:hover{
      background-image:url('URL'); /*image si la souris survole*/
      width:??px; /*Largeur de l'image*/
      height:??px; /*Hauteur de l'image*/
    }

    Dans ce code vous devez modifier les informations suivantes :

    • URL : à modifier par l'adresse de l'image, une fois hébergée ;

    • "width:??px" : ?? doit être modifié par la largeur de l'image en pixel ;

    • "height:??px" : ?? doit être modifié par la hauteur de l'image en pixel.


Conseils :

  • Dans le cas où les boutons sont collés, il est fortement conseillé de faire en sorte qu'image et image survolée (par le curseur) soient de même dimensions ;

  • Pour faire un effet de zoom, il suffit que la dimension de l'image survolée soit proportionnellement agrandie par rapport à l'image de base ;

  • Pour un remplacement immédiat sans temps de chargement (la première fois), vous pourriez avoir l'image et son remplacement sur la même "image" et utiliser la propriété background-position dans le CSS pour faire apparaître l'une ou l'autre.


Narumi

Narumi
Membre actif

Messages : 4722
Inscrit(e) le : 02/09/2007

Narumi a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum