boutons et survol de la souris

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

Résolu boutons et survol de la souris

Message par emc2 le Mer 5 Nov 2014 - 8:37

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forumfrance.forumactif.fr/

Description du problème

Bonjour,

Existe t-il une solution pour modifier l'apparence des boutons du forum lorsque l'on passe la souris dessus sans même devoir cliquer ?
Les boutons concernés sont tous ceux qu'un forum propose:
(répondre, verrouillé, nouveau, citer, éditer, effacer, etc ...)
Mo, objectif serait d'harmoniser l'ensemble des boutons dans leur apparence statique et dynamique.
Merci par avance.


Dernière édition par emc2 le Ven 7 Nov 2014 - 23:33, édité 1 fois

emc2
*****

Messages : 522
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par stefou le Mer 5 Nov 2014 - 9:16

Bonjour,
Il te faudra créer un bouton dynamique pour chaque boutons concernés.
Ensuite, même principe que ton menu, retrouver tous les id de tes boutons concernés et utilisé le même code que ton menu en ajoutant les id et images dynamiques pour chaque boutons concernés.
Je pense de mémoire que le bouton "citation multiple" à un id différant à chaque message, il faudra donc un autre code pour ceux là.

stefou
*****

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par emc2 le Mer 5 Nov 2014 - 10:17

J'ai compris le principe. Ou est-ce que l'on peut retrouver les id de chaque bouton ?

emc2
*****

Messages : 522
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par stefou le Mer 5 Nov 2014 - 11:07

Sous Chrome,
Click droit sur le bouton, inspecter l'élément.
Tu y trouvera en surlignement la ligne du code pour le bouton ou ce trouve soit l'id soit la class
Si c'est un id tu utiliseras dans ton code css
Code:
#nom_de_l'id:hover {
    background-image: url('Adresse de l'image')!important;}

Si c'est une class tu utilises
Code:
.nom_de_la_class:hover {
    background-image: url('Adresse de l'image')!important;}

Pour le bouton citation multiple il faut un autre code.
Si tu veux je regarde dans la journée pour te le donner.
Ont a le temps tu as déjà pas mal de boulot pour les autres Siffleur

stefou
*****

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par emc2 le Mer 5 Nov 2014 - 13:42

C'est clair ! Je vais déjà attaquer sur ceux là.
Merci. Je reviens ici dès que j'ai testé le truc.

... Bizarrement, ça ne fonctionne pas. (C'est une class) et en plus, ça a supprimé l'icône qui suit le speudo du dernier posteur pour renvoyé au dernier message posté.

screen:

emc2
*****

Messages : 522
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par emc2 le Mer 5 Nov 2014 - 14:15

Désolé de poster à nouveau aussi rapidement, mais c'est une véritable cata ! Les annonces défilantes ne fonctionnent plus (elles restent fixes sur la gauche de la page), les icônes de derniers message ne s'affichent pas, la toolbar a disparue, les bbcodes également ont disparus. D'ailleurs ils n'apparaissent pas non plus sur ce forum (forum des forum). Je me demande bien ce qui ce passe !

Je mets mon CSS en complet ici:
Code:
/* encadrement charte et lois */
.charte{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 10px 10px 10px #615f5f;
border: 5px solid #0e0ef5;
background-color: #c9cbf0;
}
/* encadrement regle de jeu */
.jeu{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 0px 0px 0px #615f5f;
border: 3px solid #7cba2c;
background-color: #ececec;
}
.hljs {
  display: inline-block;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}
 
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
  color: #998;
  font-style: italic;
}
 
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
  color: #333;
  font-weight: bold;
}
 
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
  color: #099;
}
 
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
  color: #d14;
}
 
.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
  color: #900;
  font-weight: bold;
}
 
.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
  font-weight: normal;
}
 
.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
  color: #458;
  font-weight: bold;
}
 
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
  color: #000080;
  font-weight: normal;
}
 
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
  color: #008080;
}
 
.hljs-regexp {
  color: #009926;
}
 
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
  color: #990073;
}
 
.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
  color: #0086b3;
}
 
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
  color: #999;
  font-weight: bold;
}
 
.hljs-deletion {
  background: #fdd;
}
 
.hljs-addition {
  background: #dfd;
}
 
.diff .hljs-change {
  background: #0086b3;
}
 
.hljs-chunk {
  color: #aaa;
}
/*IMAGE ACCUEIL*/
#i_icon_mini_index{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button10.png);/*image si la souris ne survole pas*/
  width:80px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_index:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button11.png); /*image si la souris survole*/
  width:80px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE CALENDRIER*/
#i_icon_mini_calendar{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button12.png); /*image si la souris ne survole pas*/
  width:100px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_calendar:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button13.png); /*image si la souris survole*/
  width:100px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE gallery*/
#i_icon_mini_gallery{
  background-image:url(http://i39.servimg.com/u/f39/18/86/39/02/galeri10.png);/*image si la souris ne survole pas*/
  width:64px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_gallery:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/04/22/29/galeri10.png); /*image si la souris survole*/
  width:64px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE FAQ*/
#i_icon_mini_faq{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button14.png'); /*image si la souris ne survole pas*/
  width:42px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_faq:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button15.png'); /*image si la souris survole*/
  width:42px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE RECHERCHE*/
#i_icon_mini_search{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button16.png'); /*image si la souris
ne survole pas*/
  width:102px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_search:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button17.png'); /*image si la souris survole*/
  width:102px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MEMBRES*/
#i_icon_mini_members{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button18.png'); /*image si la souris ne survole pas*/
  width:84px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_members:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button19.png'); /*image si la souris survole*/
  width:84px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE GROUPES*/
#i_icon_mini_groups{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button21.png'); /*image si la souris ne survole pas*/
  width:72px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_groups:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button22.png'); /*image si la souris survole*/
  width:72px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE PROFIL*/
#i_icon_mini_profile{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button23.png'); /*image si la souris ne survole pas*/
  width:60px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_profile:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button24.png'); /*image si la souris survole*/
  width:60px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MP (pas de nouveaux messages)*/
#i_icon_mini_message{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button25.png'); /*image si la souris ne survole pas*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_message:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button26.png'); /*image si la souris survole*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MP (nouveaux messages)*/
#i_icon_mini_new_message{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button27.png'); /*image si la souris ne survole pas*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_new_message:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button28.png'); /*image si la souris survole*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE DECONEXION*/
#i_icon_mini_logout{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button29.png'); /*image si la souris ne survole pas*/
  width:116px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_logout:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button30.png'); /*image si la souris survole*/
  width:116px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE S'ENREGISTRER*/
#i_icon_mini_register{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button31.png'); /*image si la souris ne survole pas*/
  width:88px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_register:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button32.png'); /*image si la souris survole*/
  width:88px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE CONNEXION*/
#i_icon_mini_login{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button33.png'); /*image si la souris ne survole pas*/
  width:96px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_login:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button34.png'); /*image si la souris survole*/
  width:96px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
div#fa_toolbar {
    background-color: #050f66;  /* Couleur de fond */
    border-radius: 0 0 50px 50px;  /* Arrondis les bords de la toolbar */
    box-shadow: 0 0 30px #050f66;  /* Affiche une ombre */
    margin: auto;  /* Centre la toolbar */
    width: 98%;  /* Modifie la longueur de la toolbar */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */
}
/* Icônes couleur dans la palette */
 
.color-option {
display: inline-block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
border: 2px solid #fff !important;  /* cadre blanc sur l'icône couleur */
margin: 3px !important;  /* espace entre chaque icône */
box-shadow: 0 0 2px #778899;  /* ombre */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
}
.color-option, .color-option span {
border-radius: 2px;  /* arrondi */ 
}
 
/* Palette complète - la largeur influence le nombre d'icônes affichées */
.sceditor-dropdown.sceditor-color-picker {
width: 200px !important;  /* largeur de la palette complète */
height: 100px !important;  /* hauteur de la palette complète */
padding: 5px !important;
border-radius: 5px !important;
}

Le lien du forum: http://forumfrance.forumactif.fr/

emc2
*****

Messages : 522
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par stefou le Mer 5 Nov 2014 - 14:35

Cela vient de chez toi.
Car chez moi tout est ok

Par contre pour l'icone peux-tu me donner le code que tu as placé

stefou
*****

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par emc2 le Mer 5 Nov 2014 - 19:46

Pour nouveau: j'ai mis " i_post "
pour répondre, j'ai mis " i_reply "
pour citer: " i_icon_quote "


emc2
*****

Messages : 522
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par stefou le Jeu 6 Nov 2014 - 8:56

J'ai testé cela fonctionne.

Code:
      .i_post{
            background-image: url('Adresse de l'image statique')!important;}
      .i_post:hover{
            background-image: url('Adresse de l'image dynamique')!important;}
Ne pas oublier de retirer l'image placé dans le panneau admin --> affichage--> images

stefou
*****

Masculin
Messages : 899
Inscrit(e) le : 24/11/2009

http://discussansfrontieres.forumgratuit.fr/forum
stefou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par Xoomi34 le Jeu 6 Nov 2014 - 10:25

Cela dépend comment tu veux les changer, tu peux les changer par une autre image au survol, ou encore même avec une opacité, etc ...
Ce n'est pas très compliqué, pour tes boutons, ils ont tous une images ?
Pour chaque bouton, il y a une class :
Spoiler:

Le bouton
NOUVEAU : i_post
REPONDRE: i_reply
EDITER: i_icon_edit
SUPPRIMER: i_icon_delete
Pour ce qui est du bouton VERROU, il possède la même class que Répondre . :/
Il suffit de rajouter dans votre CSS ceci par exemple:
Code:
.i_post:hover {
contenu CSS lors du survol
}

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par emc2 le Jeu 6 Nov 2014 - 21:12

Ok, je vais tenter cela dans la soirée après le dîner, et je reviendrais ici pour donner le résultat.
Pour les autres problèmes, effectivement, c'est revenu à la normal quand je me suis déconnecté et reconnecté.
Pour les images, j'ai une image sans survol, et une autre avec survol.
L'image sans survol étant mise par défaut dans le TA et la gestion des images "bouton du forum"

... Je reviens tout à l'heure.

emc2
*****

Messages : 522
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par emc2 le Jeu 6 Nov 2014 - 22:24

Verdict:
Ca ne fonctionne toujours pas.
Dans le meilleur des cas, j'ai l'image "statique" et quand je passe la souris dessus, elle reste, et le bouton est opérant.
Et lorsque je supprime l'image dans TA> affichage > image, le bouton "Nouveau" disparaît et il n'est plus accessible sur le forum.
Je n'ai pas essayé avec les autres boutons car je suppose que c'est la même chose. je pense que j'ai un truc qui ne va pas sur mon CSS.
Code:
/* encadrement charte et lois */
.charte{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 10px 10px 10px #615f5f;
border: 5px solid #0e0ef5;
background-color: #c9cbf0;
}
/* encadrement regle de jeu */
.jeu{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 0px 0px 0px #615f5f;
border: 3px solid #7cba2c;
background-color: #ececec;
}
.hljs {
  display: inline-block;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}
 
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
  color: #998;
  font-style: italic;
}
 
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
  color: #333;
  font-weight: bold;
}
 
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
  color: #099;
}
 
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
  color: #d14;
}
 
.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
  color: #900;
  font-weight: bold;
}
 
.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
  font-weight: normal;
}
 
.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
  color: #458;
  font-weight: bold;
}
 
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
  color: #000080;
  font-weight: normal;
}
 
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
  color: #008080;
}
 
.hljs-regexp {
  color: #009926;
}
 
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
  color: #990073;
}
 
.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
  color: #0086b3;
}
 
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
  color: #999;
  font-weight: bold;
}
 
.hljs-deletion {
  background: #fdd;
}
 
.hljs-addition {
  background: #dfd;
}
 
.diff .hljs-change {
  background: #0086b3;
}
 
.hljs-chunk {
  color: #aaa;
}
/*IMAGE ACCUEIL*/
#i_icon_mini_index{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button10.png);/*image si la souris ne survole pas*/
  width:80px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_index:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button11.png); /*image si la souris survole*/
  width:80px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE CALENDRIER*/
#i_icon_mini_calendar{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button12.png); /*image si la souris ne survole pas*/
  width:100px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_calendar:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/00/20/97/button13.png); /*image si la souris survole*/
  width:100px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE gallery*/
#i_icon_mini_gallery{
  background-image:url(http://i39.servimg.com/u/f39/18/86/39/02/galeri10.png);/*image si la souris ne survole pas*/
  width:64px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_gallery:hover{
  background-image:url(http://i39.servimg.com/u/f39/19/04/22/29/galeri10.png); /*image si la souris survole*/
  width:64px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE FAQ*/
#i_icon_mini_faq{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button14.png'); /*image si la souris ne survole pas*/
  width:42px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_faq:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button15.png'); /*image si la souris survole*/
  width:42px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE RECHERCHE*/
#i_icon_mini_search{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button16.png'); /*image si la souris
ne survole pas*/
  width:102px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_search:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button17.png'); /*image si la souris survole*/
  width:102px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MEMBRES*/
#i_icon_mini_members{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button18.png'); /*image si la souris ne survole pas*/
  width:84px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_members:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button19.png'); /*image si la souris survole*/
  width:84px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE GROUPES*/
#i_icon_mini_groups{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button21.png'); /*image si la souris ne survole pas*/
  width:72px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_groups:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button22.png'); /*image si la souris survole*/
  width:72px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE PROFIL*/
#i_icon_mini_profile{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button23.png'); /*image si la souris ne survole pas*/
  width:60px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_profile:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button24.png'); /*image si la souris survole*/
  width:60px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MP (pas de nouveaux messages)*/
#i_icon_mini_message{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button25.png'); /*image si la souris ne survole pas*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_message:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button26.png'); /*image si la souris survole*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE MP (nouveaux messages)*/
#i_icon_mini_new_message{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button27.png'); /*image si la souris ne survole pas*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_new_message:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button28.png'); /*image si la souris survole*/
  width:90px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE DECONEXION*/
#i_icon_mini_logout{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button29.png'); /*image si la souris ne survole pas*/
  width:116px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_logout:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button30.png'); /*image si la souris survole*/
  width:116px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE S'ENREGISTRER*/
#i_icon_mini_register{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button31.png'); /*image si la souris ne survole pas*/
  width:88px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_register:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button32.png'); /*image si la souris survole*/
  width:88px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
/*IMAGE CONNEXION*/
#i_icon_mini_login{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button33.png'); /*image si la souris ne survole pas*/
  width:96px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
  background-position: 0;
}
#i_icon_mini_login:hover{
  background-image:url('http://i39.servimg.com/u/f39/19/00/20/97/button34.png'); /*image si la souris survole*/
  width:96px; /*Largeur de l'image*/
  height:30px; /*Hauteur de l'image*/
}
.i_post:hover {
contenu CSS lors du survol
}
.i_post{
            background-image: url('http://i74.servimg.com/u/f74/18/86/39/02/nouvea10.png')!important;}
.i_post:hover{
            background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/nouvea10.png')!important;}
div#fa_toolbar {
    background-color: #050f66;  /* Couleur de fond */
    border-radius: 0 0 50px 50px;  /* Arrondis les bords de la toolbar */
    box-shadow: 0 0 30px #050f66;  /* Affiche une ombre */
    margin: auto;  /* Centre la toolbar */
    width: 98%;  /* Modifie la longueur de la toolbar */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */
}
/* Icônes couleur dans la palette */
 
.color-option {
display: inline-block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
border: 2px solid #fff !important;  /* cadre blanc sur l'icône couleur */
margin: 3px !important;  /* espace entre chaque icône */
box-shadow: 0 0 2px #778899;  /* ombre */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
}
.color-option, .color-option span {
border-radius: 2px;  /* arrondi */ 
}
 
/* Palette complète - la largeur influence le nombre d'icônes affichées */
.sceditor-dropdown.sceditor-color-picker {
width: 200px !important;  /* largeur de la palette complète */
height: 100px !important;  /* hauteur de la palette complète */
padding: 5px !important;
border-radius: 5px !important;
}
.post {
border: 3px solid #050f66;
  border-radius: 12px;
}
Les codes concernant le bouton "nouveau" se trouve après le codage de la barre de navigation.

Merci pour votre aide précieuse !

emc2
*****

Messages : 522
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: boutons et survol de la souris

Message par Scoubifitz le Ven 7 Nov 2014 - 1:41

bonjour,

il faut bien faire disparaitre le bouton "nouveau" dans le TA ...

ensuite , l'erreur est de mettre juste le background de la nouvelle image , sans lui donner les nouvelles dimensions ...


#i_icon_mini_login:hover{
background-image:url('https://i39.servimg.com/u/f39/19/00/20/97/button34.png'); /*image si la souris survole*/
width:96px; /*Largeur de l'image*/
height:30px; /*Hauteur de l'image*/
}
.i_post:hover {
contenu CSS lors du survol
}

.i_post{
background-image: url('https://i74.servimg.com/u/f74/18/86/39/02/nouvea10.png')!important;}
.i_post:hover{
background-image: url('https://i74.servimg.com/u/f74/19/04/22/29/nouvea10.png')!important;}

div#fa_toolbar {
background-color: #050f66; /* Couleur de fond */
border-radius: 0 0 50px 50px; /* Arrondis les bords de la toolbar */
box-shadow: 0 0 30px #050f66; /* Affiche une ombre */
margin: auto; /* Centre la toolbar */
width: 98%; /* Modifie la longueur de la toolbar */
}

supprimez la partie en rouge , et remplacez la partie en orange par ceci :

Code:

.i_post{
background-image: url('http://i74.servimg.com/u/f74/18/86/39/02/nouvea10.png');
  width:72px; /* Largeur de l'image */
  height:30px; /* Hauteur de l'image */
}
.i_post:hover{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/nouvea10.png');
 /* Largeur et hauteur déjà définie dans i-post */
}

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: boutons et survol de la souris

Message par emc2 le Ven 7 Nov 2014 - 23:33

Effectivement, ça marche parfaitement bien. Je vais pouvoir travailler sur les autres boutons. Merci à tout le monde de s'être penché sur le problème.
Je balise en "résolu".


emc2
*****

Messages : 522
Inscrit(e) le : 30/09/2011

http://sainte-croix.forumgratuit.org/
emc2 a été remercié(e) par l'auteur de ce sujet.

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