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

[Narumi]

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 - 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 Vous devez réaliser les images qui vous servirons. Une image pour chaque lien, et une image pour chaque lien survolé. Désactiver le texte dans la Barre de navigation, afin d'éviter " 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 afin de sauvegarder les modifications. 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 afin de sauvegarder les modifications. 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. Icones Identifiant (type #) Description #i_icon_mini_inde Id. de l'image du lien Index #i_icon_mini_calendar Id. de l'image du lien Calendrier #i_icon_mini_portal Id. de l'image du lien Portail #i_icon_mini_faq Id. de l'image du lien FAQ #i_icon_mini_search Id. de l'image du lien Rechercher #i_icon_mini_members Id. de l'image du lien Membres #i_icon_mini_groups Id. de l'image du lien Groupes #i_icon_mini_profile Id. de l'image du lien Profil #i_icon_mini_message Id. de l'image du lien MP #i_icon_mini_new_message Id. de l'image du lien Nouveaux MP #i_icon_mini_logout Id. de l'image du lien Déconnexion #i_icon_mini_login Id. de l'image du lien Connexion #i_icon_mini_register Id. de l'image du lien S'enregistrer #i_icon_mini_gallery Id. de l'image du lien Galerie #i_icon_mini_event Id. de l'image du lien Evènements #i_icon_mini_publication Id. de l'image du lien Publications 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.

Cette astuce a été rédigée par Chouquette~, actualisée par Bipo (décembre 2021). Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.