Forum gratuit : Le forum des forums actifs
Bienvenue sur le forum de support de ForumActif.

Afin de profiter pleinement de tout ce que vous offre notre forum, merci de vous identifier si vous êtes déjà membre ou de rejoindre notre communauté si vous ne l'êtes pas encore.

Créer un forum gratuit semblable à ce forum

Créer un forum gratuit

Rechercher
Magic FDFRechercher parmi les tutoriels...
Pensez à effectuer une recherche parmi les tutoriels existants avant d'ouvrir un sujet dans l'Entraide !



Afficher sous forme de :


Les posteurs les plus actifs de la semaine
Chacha
 
Nesquik
 
Neptune-
 
Ea
 
Tech
 
Kinotto
 
Vivi
 
[Nihil]
 
SeLfde4Th7
 
Solène =)
 

Thèmes du mois
Derniers sujets
Qui est en ligne ?
Il y a en tout 213 utilisateurs en ligne :: 19 Enregistrés, 0 Invisible et 194 Invités :: 2 Moteurs de recherche

[Nihil], AbsoluteGrief, AdminSL, BlueGhost, Ea, francoisenielaubin, gwlolos, John.Wille, karg007, kiki51, mlle, Neptune-, Nesquik, patricia jeanne, Scoubifitz, SeLfde4Th7, Taylor ♥, vinp'wey, Winoma

Le record du nombre d'utilisateurs en ligne est de 1877 le Jeu 19 Mai 2011 - 15:00
Images de la Barre de Navigation modifiées au passage de la souris558

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

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

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

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


    1. BUT
Like a Star @ heaven 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)->
Like a Star @ heaven Ce tutoriel est adapté à toutes les versions : phpBB2, phpBB3, punBB, Invision


    2. Pré-Requis : HTML et CSS
Like a Star @ heaven 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).

Like a Star @ heaven 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

Like a Star @ heaven 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://...').

Like a Star @ heaven 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
Like a Star @ heaven ETAPE 1 : Vous devez réaliser les images qui vous servirons. Une image pour chaque lien, et une image pour chaque lien survolé.

Like a Star @ heaven 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

Like a Star @ heaven 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

Like a Star @ heaven 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 #)DescriptionIdentifiant (type #)Description
#i_icon_mini_indexId. de l'image du lien Index#i_icon_mini_calendarId. de l'image du lien Calendrier
#i_icon_mini_portalId. de l'image du lien Portail#i_icon_mini_faqId. de l'image du lien FAQ
#i_icon_mini_searchId. de l'image du lien Rechercher#i_icon_mini_membersId. de l'image du lien Membres
#i_icon_mini_groupsId. de l'image du lien Groupes#i_icon_mini_profileId. de l'image du lien Profil
#i_icon_mini_messageId. de l'image du lien MP#i_icon_mini_new_messageId. de l'image du lien Nouveaux MP
#i_icon_mini_logoutId. de l'image du lien Déconnexion#i_icon_mini_loginId. de l'image du lien Connexion
#i_icon_mini_registerId. de l'image du lien S'enregistrer

Like a Star @ heaven 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
Like a Star @ heaven 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.
Like a Star @ heaven 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.
Like a Star @ heaven 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 Wink


Narumi
+ Hyperactif +

Messages: 4722
Réputation: 1067
Inscrit(e) le: 02/09/2007

Revenir en haut Aller en bas

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


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