comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ?

[néco]

j'ai l'art de mettre toute ma question dans le titre

salut à tous , alors voilà , j'ai donc installer les boutons d'avertissement modo/admin en suivant ce tutoriel :
https://forum.forumactif.com/t357504-bouton-avertissement-rapide-pour-modo-et-admin
(à l'exception du fait que si je mets le javascript "sur toute les pages" cela désactive tous mes autres javascript , alors j'ai juste mis le code des bouton "sur les sujets" et tout fonctionne correctement ^^ je le dis au cas où cela soit important , j'en sais rien ^^ )

à la place des gros boutons présent dans le tuto , j'ai créer moi même mes boutons à ma convenance et je les ai mis à la place des autres dans les codes , afin qu'ils ressemblent aux autres boutons de la barre de l'éditeur ...
et pour que ce soit vraiment complet et ressemblant , j'aimerais que le bouton devienne "blanc" lorsque la souris passe dessus , j'espère cela possible , car ces boutons , bien que fort pratique et sympathique , ne transforme pas le curseur de la souris en petite main lorsqu'on passe dessus , donc on dirait plus une image qu'un bouton en fait ...
et si , je pouvais avoir ces boutons qui "change" au passage de la souris , il n'y aurait plus de doute possible quand au fait qu'il s'agisse bien d'un bouton ^^
non seulement je trouverais ça plus esthétique , mais aussi plus pratique , et puis ça ressemblerait vraiment aux autres boutons de l'éditeur ^^

les boutons que j'ai créer et installer sont ceux-ci :


et lorsque l'on passe la souris dessus , j'aimerais qu'ils deviennent ainsi :

 

quelqu'un saurait me dire comment faire cela svp ?


ps : je laisse libre de droit ces boutons , qui les veux peux les prendre
(pensez cependant à changer la couleur du fond si votre  forum n'es pas en bleu-gris très pale )


ÉDIT : PS2 : si c'est super galère à faire , aidez moi juste pour celui de "modo" svp , celui d'admin à la limite c'est pas trop génant vue qu'il n'y a que moi qui le vois ^^
merci d'avance à ceux qui me répondront ^^


bizzz

vous trouverez toute la solution et le résumé en allant directement au dernier post

[Neptunia]

Bonjour ^^

Je vais tenter de répondre en aveugle (flemme d'installer les widgets sur un fofo test)

Il faudrait remplacer les images du code du widget par une image transparente vide de même dimension que vos boutons.

Et au niveau du css, rajouter

Code:


.mod_mess {
background:url("http://hebergeur/imageMODnormal.png") no-repeat;
}
.adm_mess {
background:url("http://hebergeur/imageADMnormal.png") no-repeat;
}
.mod_mess:hover {
background:url("http://hebergeur/imageMODsurvol.png") no-repeat;
}
.adm_mess:hover {
background:url("http://hebergeur/imageADMsurvol.png") no-repeat;
}

[néco]

merci , je testerais cela dès que j'aurais accédé à une image transparente de même dimention , parce qu'avec le PAINT je ne peux pas faire de transparence , du coup je vais voir si quelqu'un accepterait de me rendre ce petit service dans la section graphisme ^^
dès que je l'ai , je teste et je te dis ça

en tout cas un grand merci pour ta réponse   

bizzz

[néco]

salut Neptune !

bon alors en fait , ce que tu m'as proposer ne fonctionnait pas car en fait ".mod_mess" et ".adm_mess" ne renvoie pas sur les boutons mais sur le "cadre" qui se poste dans le post ^^

après avoir fait un bon petit million d'essaie (vue que j'y connais que dalle et que je fais tout par test et par déduction ^^) j'ai fini par trouver la solution , alors je la donne ici au cas où cela intéresserait certaines autres personnes

en tout cas un grand merci à toi , car sans ta proposition , jamais je n'aurait su comment faire ni où chercher !

------------

dans le tuto pour les boutons d'avertissement modo et admin ...
replacer les deux widgets par ceux-ci :

le widget "modo"

Code:


<script type="text/javascript">
        jQuery(document).ready(function() {
       
        jQuery("#text_editor_textarea").before("<img src='http://i55.servimg.com/u/f55/16/02/70/00/28233_10.png' class='boutmodo' title='Avertissement Modo' id='modbutt' />");
       
        jQuery('#modbutt').click(function(){
        jQuery("div.sceditor-toolbar + iframe").contents().find("body").append('[mod][/mod]');
        jQuery('.sceditor-container textarea')[0].value += '[mod][/mod]'
        });
       
        });
        </script>

en fait j'ai juste rajouter ceci derrière l'image

Code:

class='boutmodo'

---

et le widget admin :

Code:

<script type="text/javascript">
        jQuery(document).ready(function(){
       
        jQuery("#text_editor_textarea").before("<img src='http://i55.servimg.com/u/f55/16/02/70/00/28233_10.png' class='boutadmin' title='Avertissement Admin'  id='admbutt' />");
       
        jQuery('#admbutt').click(function(){
        jQuery("div.sceditor-toolbar + iframe").contents().find("body").append('[adm][/adm]');
        jQuery('.sceditor-container textarea')[0].value += '[adm][/adm]'
        });
       
        });
        </script>

et ici j'ai juste ajouter ceci derrière l'image

Code:

class='boutadmin'

---------------

et ensuite , j'ai juste transformé le code css que Neptune me propose , par :

Code:

        .boutmodo {
        background:url("http://hebergeur/imageMODnormal.png") no-repeat;
        }
        .boutadmin {
        background:url("http://hebergeur/imageADMnormal.png") no-repeat;
        }
        .boutmodo:hover {
        background:url("http://hebergeur/imageMODsurvol.png") no-repeat;
        }
        .boutadmin:hover {
        background:url("http://hebergeur/imageADMsurvol.png") no-repeat;
        }

et TADA !!! ça fonctionne bien   

encore merci pour ton aide Neptune   , sans toi j'aurais jamais su par où commencer ni comment faire

bizzz à tous

[Chacha]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur A bientôt sur ForumActif

[Neptunia]

Héhé !

Ayant travaillé en aveugle, cela m'aurait étonné que mon code fonctionne tel quel.

En tout cas j'étais sûr de mon coup pour l'image vide. Sans celle ci, le bouton "survol" se serait glissé sous le bouton normal et serait resté invisible. C'est ce principe qu'on reprend sur la navigation avec effet de survol.

L'essentiel est qu'à partir de cette information tu as réussi à solutionner ton problème.

Tu peux si tu le souhaites rajouter un 3e bouton qui sera apparent au moment du clic.

.boutmodo:active {
background:url("http://hebergeur/imageMODclic.png") no-repeat;
}
.boutadmin:active {
background:url("http://hebergeur/imageADMclic.png") no-repeat;
}

[néco]

oui oui chacha , ne t'en fais pas , je n'oublie jamais !

c'est juste que j'ai remarqué que mes boutons n'étaient pas très joli car mal aligné au reste , donc je les ai refait afin d'en modif les liens ici (avant de verrouiller) comme ça , si ça intéresse quelqu'un , ce quelqu'un n'aura pas le petit décalage tout moche que j'avais fait ! ^^

et maintenant que Neptune me donne une autre idée ... je vais de ce pas créer un 3ième bouton afin de tester sa proposition (et , proposer ici même ce 3ième bouton également ^^)
je laisse ouvers jusqu'à ce que je soit certaine de pas avoir d'autre question à lui poser à ce sujet , puisque pour l'instant j'ai pas tester encore ^^

une fois tout cela fait , je mettrais en résolu car je suis la 1er à râler (dans ma tête) quand je vois de bons topics partir à la corbeille

je reviens tout à l'heure après mes créations et mes tests   

bizzz

[néco]

ben finalement j'ai bien fait d'attendre un peu avant de faire vérouiller ^^

Neptune stp ?
lorsque tu m'as dis "une 3ième image au clic" , moi j'ai imaginé que ça voulait dire que "après avoir cliqué , le 3ième bouton reste visible en permanence tant qu'on n'actualise pas la page ni rien" , or , ce 3ième bouton ne s’aperçoit qu'une fraction de seconde , le temps du clic en fait .

saurais-tu s'il te plait , me dire comment faire ce à quoi je m'attendais ?
si cela est possible bien sûr ^^

bizzz

[Neptunia]

J'avais bien précisé "au moment du clic"

C'est à dire une fraction de seconde si on ne fait que cliquer, et un peu plus si on a une connexion pourrie

Pour ce qui est de maintenir le bouton "cliqué" lorsqu'on relâche le bouton de la souris je ne saurais pas le faire.

[néco]

ok , merci quand même , je tenterais de rechercher moi-même on sais jamais , des fois avec un coup de chance ! ^^

en attendant , je laisse ce topic ouvers au cas où quelqu'un aurait la réponse à cette question (avec un up par 24 heures)
et je le mettrait en résolu un peu plus tard !
dans tous les cas il ne partira pas à la corbeille

pour ceux que cela intéresserait éventuellement , les boutons que j'avais fait en pensant (à tord parce que j'ai compris de travers ^^) qu'ils resteraient plus longtemps visibles , était ceux-ci ^^

 

-------

si quelqu'un sait comment faire pour qu'un bouton change après le clic ? je suis preneuse ^^

bizzz


ÉDIT : finalement je vais ouvrir un second topic pour cette secondes questions , parce qu'apparemment elle n'as encore jamais été posé (ou alors j'ai vraiment pas trouvé)
ce sera mieux non seulement pour la recherche , mais aussi pour moi puisque ce que je demande dans ce post-ci ne correspond pas du tout à mon titre du coup ^^


re bizzz


ÉDIT 2 : bon ben j'ai créer deux boutons de plus , pour qu'au clic ce soit exactement comme ceux de la barre de l'éditeur !

les voici



re bizzz et rdv au post suivant pour le big résumé du topic ^^

[néco]

bon voilà , je vous fais ici le résumé du topic avec ce que j'ai pu récolter comme aide et bonnes idée à la fois sur ce topic ainsi que sur l'autre (ici : https://forum.forumactif.com/t367821-comment-faire-changer-l-image-d-un-bouton-apres-avoir-clique-dessus-svp )

------------------------------------------------------

pour les personnes qui voudraient que leurs bouton d'avertissement admin et modo ressemble exactement aux autres boutons de la barre de l'éditeur , voici la marche à suivre :

pour avoir les boutons en mode "normal" comme ça :
https://i.servimg.com/u/f55/16/13/24/40/modnor10.png
https://i.servimg.com/u/f55/16/13/24/40/admnor10.png

et en mode "survol" comme ça :
https://i.servimg.com/u/f55/16/13/24/40/modsur10.png
https://i.servimg.com/u/f55/16/13/24/40/admsur10.png

et au moment du "clic" comme ça (pareil que l'éditeur quoi ) :
https://i.servimg.com/u/f55/16/13/24/40/modcli10.png
https://i.servimg.com/u/f55/16/13/24/40/admcli10.png

il vous suffis de remplacer votre widget MODO par celui-ci :

Code:


<script type="text/javascript">
                jQuery(document).ready(function() {
              
       jQuery("#text_editor_textarea").before("<img src='http://i55.servimg.com/u/f55/16/02/70/00/28233_10.png' class='boutmodo' title='Avertissement Modo' id='modbutt' />");
              
               jQuery('#modbutt').click(function(){
                jQuery("div.sceditor-toolbar + iframe").contents().find("body").append('[mod][/mod]');
                jQuery('.sceditor-container textarea')[0].value += '[mod][/mod]'
                });
              
               });
                </script>

et le widget ADMIN par celui-ci :

Code:

<br /> <script type="text/javascript">
        jQuery(document).ready(function(){
        
       jQuery("#text_editor_textarea").before("<img src='http://i55.servimg.com/u/f55/16/02/70/00/28233_10.png' class='boutadmin' title='Avertissement Admin'  id='admbutt' />");
        
       jQuery('#admbutt').click(function(){
        jQuery("div.sceditor-toolbar + iframe").contents().find("body").append('[adm][/adm]');
        jQuery('.sceditor-container textarea')[0].value += '[adm][/adm]'
        });
        
       });
        </script>

et mettre dans la feuille de style css , ceci :
(vous pouvez utiliser tel quel , c'est pas utile de réhébergé les images si elles vous conviennent )

Code:

        /* changer l image des boutons modo-admin au passage de la souris et au clic */
       .boutmodo {background:url("http://i55.servimg.com/u/f55/16/13/24/40/modnor10.png") no-repeat;}
       .boutadmin {background:url("http://i55.servimg.com/u/f55/16/13/24/40/admnor10.png") no-repeat;}
       .boutmodo:hover {background:url("http://i55.servimg.com/u/f55/16/13/24/40/modsur10.png") no-repeat;}
       .boutadmin:hover {background:url("http://i55.servimg.com/u/f55/16/13/24/40/admsur10.png") no-repeat;}
       .boutmodo:active {background:url("http://i55.servimg.com/u/f55/16/13/24/40/modcli10.png") no-repeat;}
       .boutadmin:active {background:url("http://i55.servimg.com/u/f55/16/13/24/40/admcli10.png") no-repeat;}

-----------------------------------------

si , tout comme moi , vous souhaitez avoir une quatrième image (que j'appelle "finale") et qui reste après le clic tant que la page reste la même (disparait dès que vous actualisez ou que vous postez ou quoi )

j'ai voulu faire une image qui reproduit en miniature le cadre qui sera poster dans le post en utilisant le bouton d'avertissement )
voici donc ces images :
https://i.servimg.com/u/f55/16/13/24/40/modfin10.png
https://i.servimg.com/u/f55/16/13/24/40/admfin10.png

là ...

il vous faut mettre dans le widget MODO ceci :

Code:

<script type="text/javascript">
                jQuery(document).ready(function() {
              
       jQuery("#text_editor_textarea").before("<img src='http://i55.servimg.com/u/f55/16/02/70/00/28233_10.png' class='boutmodo' onClick=\"jQuery('.boutmodo').addClass('boutmodoactive').removeClass('boutmodo');\" title='Avertissement Modo' id='modbutt' />");
              
               jQuery('#modbutt').click(function(){
                jQuery("div.sceditor-toolbar + iframe").contents().find("body").append('[mod][/mod]');
                jQuery('.sceditor-container textarea')[0].value += '[mod][/mod]'
                });
              
               });
                </script>

et dans le widget ADMIN ceci :

Code:

<br /> <script type="text/javascript">
        jQuery(document).ready(function(){
        
       jQuery("#text_editor_textarea").before("<img src='http://i55.servimg.com/u/f55/16/02/70/00/28233_10.png' class='boutadmin' onClick=\"jQuery('.boutadmin').addClass('boutadminactive').removeClass('boutadmin');\" title='Avertissement Admin'  id='admbutt' />");
        
       jQuery('#admbutt').click(function(){
        jQuery("div.sceditor-toolbar + iframe").contents().find("body").append('[adm][/adm]');
        jQuery('.sceditor-container textarea')[0].value += '[adm][/adm]'
        });
        
       });
        </script>

et dans votre feuille de style css , ceci :

Code:

       /* changer l image des boutons modo-admin au passage de la souris, au clic et après le clic */
       .boutmodo {background:url("http://i55.servimg.com/u/f55/16/13/24/40/modnor10.png") no-repeat;}
       .boutadmin {background:url("http://i55.servimg.com/u/f55/16/13/24/40/admnor10.png") no-repeat;}
       .boutmodo:hover {background:url("http://i55.servimg.com/u/f55/16/13/24/40/modsur10.png") no-repeat;}
       .boutadmin:hover {background:url("http://i55.servimg.com/u/f55/16/13/24/40/admsur10.png") no-repeat;}
       .boutmodo:active {background:url("http://i55.servimg.com/u/f55/16/13/24/40/modcli10.png") no-repeat;}
       .boutadmin:active {background:url("http://i55.servimg.com/u/f55/16/13/24/40/admcli10.png") no-repeat;}
       .boutmodoactive {background:url("http://i55.servimg.com/u/f55/16/13/24/40/modfin10.png") no-repeat;}
       .boutadminactive {background:url("http://i55.servimg.com/u/f55/16/13/24/40/admfin10.png") no-repeat;}  

et voilà

attention , si votre forum n'est pas d'un fond bleu-gris-très-clair , il vous faudra changer la couleur du fond extérieur de chaque boutons pour le mettre soit de la couleur de votre fond , soit en transparent

si vous voulez modifier ces boutons en en créant vous même et que vous prenez des dimensions différentes , n'oubliez pas de mettre dans vos widgets , le lien d'un bouton de même dimension mais entièrement transparent

bizzz à tous