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

[Narumi]

Barre de Navigation Images modifiées au passage de la souris (curseur)

1. BUT 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. -(on passe la souris sur l'image)-> Ce tutoriel est adapté à toutes les versions : phpBB2, phpBB3, punBB, Invision 2. Pré-Requis : HTML et CSS Qu'est-ce que le HTML et le 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. PA > 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('http://...'). 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. 3. Tutoriel : Marche à suivre ETAPE 1 : Vous devez réaliser les images qui vous servirons. Une image pour chaque lien, et une image pour chaque lien survolé. ETAPE 2 : Désactiver le texte dans la Barre de navigation, afin d'éviter " Accueil" PA > Affichage > En-tête & Navigation > Afficher seulement des images dans la barre des liens : OUI ETAPE 3 : Dans PA > Affichage > Gestion des Images : Remplacer l'adresse des images Index, Calendrier, Portail, FAQ, rechercher, Membres, Groupes, Editer Profil, Messages Privés, Nouveaux Messages Privés, S'enregistrer, Connexion, Déconnexion par l'adresse suivante. Code: http://illiweb.com/fa/empty.gif ETAPE 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. Identifiant (type #) Description Identifiant (type #) Description #i_icon_mini_index 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 ETAPE 5 : Le code CSS Ce code est à intégrer dans la feuille de style CSS de votre forum (PA > 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*/ } Dans ce code vous devez modifier les informations suivantes : URL : A 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. 4. Quelques 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. Bon Courage

Ce tutoriel a été rédigé par Chouquette~ Aucune reproduction possible sans notre accord, conformément à l’article L122-1 du CPI.