Partagez | 

 Barre de navigation


avatar

Coolosseman
Fondateur

Messages : 238
Date d'inscription : 28/04/2010
Âge : 24

MessageSujet: Barre de navigation   Jeu 13 Oct - 2:00

Placement : Panneau d'administration > Affichage > Couleur > Feuille de style CSS

Permet de faire changer les images sur la barre de navigation au survol de la souris

Les liens d'images sont à changer !
La taille des images sont à changer !


Exemple de code (ancien forum):

Code:
/*IMAGE INDEX*/
#i_icon_mini_index{
  background-image:url('http://img11.imageshack.us/img11/7626/accueillea.png');
  width:89px;
  height:52px;
}
#i_icon_mini_index:hover{
  background-image:url('http://img404.imageshack.us/img404/4366/accueilb.png');
  width:89px;
  height:52px;
}

/*IMAGE MP (pas de nouveaux messages)*/
#i_icon_mini_message{
background-image:url('http://img269.imageshack.us/img269/3240/mpa.png');
width:43px;
height:52px;
}
#i_icon_mini_message:hover{
background-image:url('http://img217.imageshack.us/img217/1049/mpbp.png');
width:43px;
height:52px;
}

/*IMAGE FAQ*/
#i_icon_mini_faq{
  background-image:url('http://img526.imageshack.us/img526/2326/faqaa.png'); /*image si la souris ne survole pas*/
  width:60px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}
#i_icon_mini_faq:hover{
  background-image:url('http://img263.imageshack.us/img263/5240/faqbl.png'); /*image si la souris survole*/
  width:60px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}

/*IMAGE RECHERCHE*/
#i_icon_mini_search{
  background-image:url('http://img338.imageshack.us/img338/511/recherchera.png'); /*image si la souris ne survole pas*/
  width:107px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}
#i_icon_mini_search:hover{
  background-image:url('http://img683.imageshack.us/img683/361/rechercherb.png'); /*image si la souris survole*/
  width:107px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}

/*IMAGE LISTE MEMBRES*/
#i_icon_mini_members{
  background-image:url('http://img59.imageshack.us/img59/1945/membresav.png'); /*image si la souris ne survole pas*/
  width:85px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}
#i_icon_mini_members:hover{
  background-image:url('http://img696.imageshack.us/img696/8498/membresbx.png'); /*image si la souris survole*/
  width:85px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}

/*IMAGE GROUPES*/
#i_icon_mini_groups{
  background-image:url('http://img228.imageshack.us/img228/5962/groupea.png'); /*image si la souris ne survole pas*/
  width:82px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}
#i_icon_mini_groups:hover{
  background-image:url('http://img219.imageshack.us/img219/1631/groupeb.png'); /*image si la souris survole*/
  width:82px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}

/*IMAGE PROFIL*/
#i_icon_mini_profile{
  background-image:url('http://img153.imageshack.us/img153/1067/profila.png'); /*image si la souris ne survole pas*/
  width:66px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}
#i_icon_mini_profile:hover{
  background-image:url('http://img341.imageshack.us/img341/9237/profilb.png'); /*image si la souris survole*/
  width:66px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}

/*IMAGE DECONEXION*/
#i_icon_mini_logout{
  background-image:url('http://img24.imageshack.us/img24/1390/offaj.png'); /*image si la souris ne survole pas*/
  width:66px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}
#i_icon_mini_logout:hover{
  background-image:url('http://img59.imageshack.us/img59/2091/offbv.png'); /*image si la souris survole*/
  width:66px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}

/*IMAGE CONNEXION*/
#i_icon_mini_login{
  background-image:url('http://img690.imageshack.us/img690/183/onar.png'); /*image si la souris ne survole pas*/
  width:66px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}
#i_icon_mini_login:hover{
  background-image:url('http://img341.imageshack.us/img341/7890/onb.png'); /*image si la souris survole*/
  width:66px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}

/*IMAGE S'ENREGISTRER*/
#i_icon_mini_register{
  background-image:url('http://img215.imageshack.us/img215/9548/inscrire.gif'); /*image si la souris ne survole pas*/
  width:106px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}
#i_icon_mini_register:hover{
  background-image:url('http://img177.imageshack.us/img177/9412/inscrirew.png'); /*image si la souris survole*/
  width:106px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}

/*IMAGE MP (nouveaux messages)*/
#i_icon_mini_new_message{
  background-image:url('http://hitskin.com/themes/13/06/08/i_icon_mini_new_message.gif'); /*image si la souris ne survole pas*/
  width:43px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}
#i_icon_mini_new_message:hover{
  background-image:url('http://img24.imageshack.us/img24/9560/99762630.png'); /*image si la souris survole*/
  width:43px; /*Largeur de l'image*/
  height:52px; /*Hauteur de l'image*/
}



http://forum.forumactif.com/t246228-images-de-la-barre-de-navigation-modifiees-au-passage-de-la-souris#2235908

____________________________________


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://coolosseman.forumsactifs.net

 Barre de navigation

Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum des mille et une merveilles ::  :: Gestion d'apparence :: CSS-