comment faire changer l'image d'un bouton après avoir cliqué dessus svp ?

[néco]

bonsoir à tous !

alors voilà , j'ai eu envie de modifier les deux boutons d'avertissement admin et modo pour avoir un survol (et les rendre un peu plus élégant ^^) , puis , suite à ce topic (que voici au cas où cela vous intéresse également : https://forum.forumactif.com/t367761-comment-faire-changer-les-boutons-d-avertissement-modo-admin-au-passage-de-la-souris-puis-au-clic-puis-apres-le-clic )

je me suis dis que j'aurais bien aimé que ces boutons se modifie après avoir cliqué dessus , et ce , jusqu'au changement de page suivant , ou une actualisation ou quoi ...

voici mon code css actuel :

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/02/70/00/5modo10.png") no-repeat;}
        .boutadmin {background:url("http://i55.servimg.com/u/f55/16/02/70/00/5admin12.png") no-repeat;}
        .boutmodo:hover {background:url("http://i55.servimg.com/u/f55/16/02/70/00/5modo211.png") no-repeat;}
        .boutadmin:hover {background:url("http://i55.servimg.com/u/f55/16/02/70/00/5admi211.png") no-repeat;}
        .boutmodo:active {background:url("http://i55.servimg.com/u/f55/16/02/70/00/5modcl10.png") no-repeat;}
        .boutadmin:active {background:url("http://i55.servimg.com/u/f55/16/02/70/00/5admic10.png") no-repeat;}

les deux dernières lignes contiennent :active , mais cela change le bouton uniquement le temps du clic , autant dire une fraction de seconde ^^ (souvent il ne s'affiche même pas tant c'est rapide ^^)

et j'aurais aimé savoir quel est le mot à mettre à la place de ce :active pour avoir ce que j'explique plus haut ?

à moins que ce ne soit pas du tout comme cela qu'il faille procéder ?   

j'ai tenté une longue recherche mais je n'ai rien trouvé , voilà pourquoi je pose la question (avec un titre explicite   ) dans l'espoir qu'en plus de m'aider moi , cela serve éventuellement à d'autre aussi

quelqu'un saurait-il m'aider à assouvir ce petit désir s'il vous plait ?   

merci par avance   

bizzz

un grand merci à stefou qui a passé litéralement des heures à chercher sans trouvé ce que je voulais mais en trouvant autre chose qui peut être utile pour autre chose
un énorme merci à MasDan qui m'as donné 95% de la solution pour avoir ce que je voulais
et un merci spéciale à Ea qui m'as fourni les 5% restant ainsi que des explications fort utile qui me resserviront sans doute ^^
un gros bizou à vous 3 les gars

[stefou]

Bonjour,
J'ai tripoté mon css en combinant ":active" et "transition-delay".

Comme je n'ai pas ton code, j'ai utilisé la tool-bar.
Avec ce code le fond rectangulaire de recherche dans la tool-bar devient vert.
Si tu cliques dessus il devient rouge.
10 secondes plus tard, il reprend sa couleur initial vert.
ont peux donc tricher en mettant 600s pour obtenir 10 minutes ou plus encore...

Place (pour tester) ce code dans feuille de style css

Code:

#fa_search :active{background-color:red;
-webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s;}

#fa_textarea {background-color:green;
  -webkit-transition-delay: 10s; -moz-transition-delay: 10s; -ms-transition-delay: 10s; -o-transition-delay: 10s;}

Il faut donc travailler sur ce code pour l'adapter à tes boutons avertissement.
A moins qu'il existe une autre commande que je ne connais pas...

[néco]

salut
avant tout , merci de m'avoir répondu ^^

mais je n'y arrive pas ...
j'arrive pas à comprendre comment ça fonctionne sur ton code

déjà , saurais-tu m'expliquer simplement pourquoi les deux partie ne commence pas de la même façon ? (#fa_search ... et ... #fa_textarea)

es ce que tu crois que je doivent remplacé ces deux partie par le même et unique "mot" chez moi ? (à savoir .boutmodo)
s'il me faut deux "mot" différents , je ne vois pas du tout ce que je dois prendre en second mot ^^

et aussi , es ce que tu aurais la patience de m'expliquer pourquoi ta partie de code qui contient le mot "green" c'est aussi celle qui contien "10s" , alrs que c'est le rouge qui dure 10 seconde et inversement ?

et moi ? je dois remplacer ces couleurs par mes liens d'image je suppose , mais j'ai testé de plusieurs façon et je n'y arrive pas (je m'y prend surement mal puisque j'y vais à taton ^^)

en plus , je sait pas non plus si je suis censé mettre un ; derrière la ) de mon lien ou pas ?

j'essaie vraiment de comprendre mais c'est pas évident quand on ne connait que ce qu'on a déjà lu et testé ça et là sans plus ^^

bizzz

[stefou]

Pour la toolbar, il y a deux class concerné.
pour un bouton il n'y en as que une.
la partie green du 1er code c'est la valeur par défaut et le délais pour y arriver.
Oublions le 1er code c'était pour tester et te montrer que c'était faisable vu que c'est le seul code que nous avons en commun.

Je viens de faire des testes sur mes boutons, apparemment cela ne fonctionne pas sur des images mais très bien sur le fond de couleur.

Peut-être devrais-tu utiliser des boutons transparent et travailler sur la couleur de l'arrière plan.

Voilà le code pour mes boutons avec changement de la couleur arrière plan.

Code:

/*1er, détermine au clique souri la couleur de fond en rouge en 0 seconde*/
/*il faut déterminer 0 seconde pour inhiber les secondes du le deuxième code*/
#modbutt:active{background-color:red;
    -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
}
/*2ème , détermine le délai pour revenir à la couleur de fond initiale*/
#modbutt{
   -webkit-transition-delay: 10s; -moz-transition-delay: 10s; -ms-transition-delay: 10s; -o-transition-delay: 10s; transition-delay: 10s;}

Je te conseil donc de travailler avec un bouton transparent.

[stefou]

Pourrais-tu activer provisoirement un bouton pour les membres que je puisse voir et tester (je me suis, inscrit)

[néco]

je t'ai passé modo donc tu devrais le voir je suppose (même si je ne suis pas certaine vue que tu n'as pas encore poster un post minimum ^^)

ceci dit ...
mes boutons ont déjà un fond transparent dans les widgets ... ce que j'ai mis dans le 1er post c'est dans le css

si tu clic sur le lien de l'autre topic dans mon 1er post tu comprendra bien mieux à mon avis ^^

pour l'instant c'est mon code qui est en place !

le tiens je dois en faire quoi ? juste le coller tel quel dans mon css ? ou l'adapter de x ou y façon ?

bizzz

[stefou]

je vois ton bouton, je vérifie car on a pas les memes id de bouton

[néco]

viens sur ma chat box si ça te géne pas trop , ce serra plus pratique que de parler ici , et si tu trouve une solution on viendra évidement la mettre sur ce topic ensuite

bizzz et merci encore ^^

[stefou]

Voici les codes utilisé.
Css

Code:

       .boutmodo:active{background-color:red;
            -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;
        }
        .boutmodo{
           -webkit-transition-delay: 10s; -moz-transition-delay: 10s; -ms-transition-delay: 10s; -o-transition-delay: 10s; transition-delay: 10s;}

Remplacer également l'image par une transparente dans le widgets


Le seul problème est que avec ce code c'est soit "hover", soit "active" je n'ai pas réussi a combiner les deux en cause le transition-delay
Demain je continue à   chercher

[néco]

merci énormément pour le temps passé et tout tes efforts !

tu as tout le temps que tu veux pour chercher une solution (celle-ci ou une autre) parce que de toute façon je continuerais à up ce sujet un certain temps

je te fais mille bizzz de remerciement et te souhaite une excellente nuit ! ^^

bizoux

ps : tu n'oubliera pas de répondre à ma dernière question sur ma chatbox , même si c'est pas urgent

re bizoux

[stefou]

Bonjour,
Tu ne devra pas attendre longtemps car j'ai réussi a monter un truc   
Je dois créer les images, et je te prépare cela dans l'après midi.

[néco]

oula ! je ne sais pas exactement ce que tu entends pas "créer des images" , mais j'ai justement passé des heures à faire très exactement les images que je voulais au pixel près , et je n'en veux pas des différentes ^^

je te les redonne au cas où :

 

(plus celle entièrement transparente qui est placé dans les widgets , je la mets juste au cas où ... :  )

si cela n'es pas possible de les utiliser , ne te prend pas la tête pour rien car je n'utiliserais probablement pas ta solution si elle diffère de ça !

par rapport à ce que tu as tenté hier ...
je me suis dit que je pouvais éventuellement "laisser tomber" ma 3ième image au profit de la couleur (bleu) comme tu me l'avais proposer ...
par contre , les deux 1er images je les souhaites exactement tel quel

encore merci en tout cas pour ta patience et ta gentillesse   

bizzz

[stefou]

Tes trois 1er images sont ok mais la transparente est pas transparente  :lol!: elle est blanche (si elle serait transparente ont ne la verrais pas   ) pas grave je vais la faire...
J'ai passé un peu de temps sur ce projet..., je compte y aller jusqu'au bout... ne fusse que pour ma satisfaction.
Le résultat sera identique à ce que tu souhaites...

[stefou]

Voilà après de nombreuses tentative, comme je t'ai dit hier, la combinaison de "hover" et "active" ne fonctionne pas sur les images mais elle fonctionne sur la couleur de fond.
je pensais avoir trouvé pour la 3ème image, mais je bloque.

Voici un code qui te donnera quasi le même résultat mais pas d'image bleu, juste fond blanc.
De base -->
Au survol -->
Au clique souri --> --> pendant 10 minutes.

Dans ton widgets modérateur, il faut remplacer le lien de l'image de fond.
le code avec le nouveau lien pour ton forum est

Code:

<script type="text/javascript">
                jQuery(document).ready(function(){
              
               jQuery("#text_editor_textarea").before("<img src='http://i55.servimg.com/u/f55/17/67/21/72/averti11.png' class='boutmod' title='Avertissement Modérateur'  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>

Ensuite dans le css tu enlèves les codes que tu as placé pour le bouton modérateur et tu remplace par celui-ci:

Code:

#modbutt{background:url('http://i55.servimg.com/u/f55/17/67/21/72/modo_t10.png');
}        
#modbutt:hover{background:url('http://i55.servimg.com/u/f55/16/02/70/00/5modo211.png');
 -webkit-transition-delay: 600s; -moz-transition-delay: 600s; -ms-transition-delay: 600s; -o-transition-delay: 600s; transition-delay: 600s;
}
#modbutt:active{background-color:white;
 -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s;      
}

Si tu le souhaites, tu peux remplacer "white" par une autre couleur  

Désolé d'avoir pris du temps mais des fois je dois travailler   

ps: j'ai encore une idée de faire un rectangle et de faire coulisser les images dans ce rectangle, j'ai vu un code là dessus il y a longtemps pour un menu. car je crois que ce code pourrait fonctionner avec "transition-delay"

[néco]

coucou !
je viens d'essayer , et bien que cela fonctionne cela n'as pas du tout le rendu estétique que j'espérais ^^

regarde ...
en mode "normal" mon bouton n'est pas de la même couleurs que le reste des boutons de l'éditeur ni que le bouton admin ,
et aussi , ça fait des pixel blanc autour du mot quand je mets une couleur ^^
(surtout que bleu sur bleu ça se vois pas des masses en plus , c'est pour ça que sur ma 3ième image j'avais mis du noir ^^)


je te remercie vraiment beaucoup beaucoup , mais je ne vais pas garder cette solution !   

je vais continuer à up quelque temps pour voir si quelqu'un d'autre à une autre idée ou solution , et si ce n'est pas le cas , je garderais juste ce que j'ai actuellement , après tout c'est pas bien dramatique si j'ai pas ça ^^

je n'oublierais pas de mettre en résolu afin que ton travail soit conservé et puisse servir à d'autres avec des petites adaptation éventuel , ou toi même t'y référer ultérieurement par exemple ^^

mais en attendant , je garde ce que j'avais déjà ^^

gros bizou à toi

[stefou]

Ok, pour ce qui est de la couleur en mode normal qui est pas identique a celle de admin, c'est normal car tu n'a pas changé le lien de l'image dans dans le widgets...
Bonne soirée

[néco]

ben j'ai pris ce que tu m'as donné dans le post précédent

qu'aurais-je du mettre d'autre si c'est pas ça ?

bizzz

[MasDan]

Bonjour,

Voici ma version des modifications.

Du CSS fournit au premier message on change les deux dernières lignes

Code:

.boutmodo:active {background:url("http://i55.servimg.com/u/f55/16/02/70/00/5modcl10.png") no-repeat;}
.boutadmin:active {background:url("http://i55.servimg.com/u/f55/16/02/70/00/5admic10.png") no-repeat;}

par

Code:

.boutmodoactive {background:url("http://i55.servimg.com/u/f55/16/02/70/00/5modcl10.png") no-repeat;}
.boutadminactive {background:url("http://i55.servimg.com/u/f55/16/02/70/00/5admic10.png") no-repeat;}

En enlevant les deux points, nous créons une nouvelle catégorie.

Maintenant, modifions les widgets admin et modo pour ajouter un «onClick» pour modifier la classe.
Au widget modo, nous remplaçons

Code:

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' />");

par

Code:

jQuery("#text_editor_textarea").before("<img src='http://i55.servimg.com/u/f55/16/02/70/00/28233_10.png' class='boutmodo' onClick="$('.boutmodo').addClass('boutmodoactive').removeClass('boutmodo');" title='Avertissement Modo' id='modbutt' />");

et au widget admin, nous remplaçons

Code:

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' />");

par

Code:

jQuery("#text_editor_textarea").before("<img src='http://i55.servimg.com/u/f55/16/02/70/00/28233_10.png' class='boutadmin' onClick="$('.boutadmin').addClass('boutadminactive').removeClass('boutadmin');" title='Avertissement Admin'  id='admbutt' />");

Avec ces modifications, la troisième image va ternir jusqu'au prochain changement de page ou d'actualisation.

[stefou]

Super MasDan   

[stefou]

Bonjour,
chez moi le js ne fonctionne pas   

[néco]

stefou , ce que donne MasDan c'est pas le js c'est le widget (ceci dit , dans le js moi j'ai du mettre "sur les sujets" et non "sur toute les pages" sinon je perdais tous mes autres js ^^ )

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

MasDan , merci de te pencher sur mon problème ! ^^

ta solution qui à l'air vraiment géniale ne fonctionne malheureusement pas

dans le widget le symbole dollar ($) se transforme en  $

ÉDIT : et ici sur le post c'est l'inverse , nondédioudénondédiou   

Code:

le dollar se transforme donc en $

de plus ...
lorsque je valide tout correctement , mon bouton disparait litéralement (il n'est pas invisible , il est plus là ^^)

mais ...
lorsque je transforme légèrement ta ligne supplémentaire :

Code:

onClick="$('.boutmodo').addClass('boutmodoactive').removeClass('boutmodo');"

par :

Code:

onClick='$('.boutmodo').addClass('boutmodoactive').removeClass('boutmodo');'

le bouton réapparait , mais il n'y a que le mode survol et le mode normal qui sont là ^^
(ps : j'ai juste changé les " par des ' )

mais dans les deux cas , le dollar deviens

Code:

$

... donc ça ne marche pas

aurais-tu la solution à cela s'il te plait ?

merci beaucoup pour ta réponse en tout cas

bizzz

ÉDIT 2 : woooocon !!! même dans les balise [code] ça se transforme , c'est à devenir fou ce truc ...
je te l'écris avec des espaces en espérant que ça marche cette fois ... le $ deviens donc :

& # 3 6 ;

(sans aucun espace donc )


re bizzz

[Ea]

Bonjour,


Les développeurs ont l'air de dire que c'est fait exprès, ce qui va au delà de ma compréhension.

En tout cas j'avais un peu parlé du problème dans ce sujet :
https://forum.forumactif.com/t339896-outrepasser-le-bug-du-caractere

Pour le cas donné dans votre message précédent, vous pouvez simplement remplacer $ par jQuery

Cordialement.

[néco]

bonjour Ea , et merci pour ta réponse

ps : j'adore ta phrase dans le tuto
"Il semblerait que ce soit contre des spammeurs qui utiliseraient le caractère $ dans leur spam. Vu que $ est tout de même affiché, je miserais plus sur un développeur aigri qui veut enquiquiner le reste du monde."

bref !
-------------

j'ai tenter de mettre jQuery à la place de $ comme tu me le dis , mais cela ne fonctionne toujours pas

(je rappel que j'ai mis des ' ' à la place des " " , sinon le bouton disparait carrément ... mais j'ai testé jQuery avec les ' et avec les " , aucun ne fonctionne ... dans le cas des ' ' j'ai le bouton en mode normal et en mode survol , mais toujours pas la 3ième image (avec les " " j'ai plus rien du tout ) )

j'ai teste à tout hasard les 3 'caractère' de ton tuto , mais ça donne toujours rien (enfin , que l'image normal et l'image survol quoi ^^ )

je remet ici ce que j'ai actuellement ^^

dans le css :

Code:

      .boutmodoactive {background:url("http://i55.servimg.com/u/f55/16/02/70/00/5modcl10.png") no-repeat;}

et dans le Widget (en entier) :

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>

je précise que mes deux widgets se trouve dans une colone "masqué" , je sais pas si ça joue ou si ça fait une différence alors je le précise ! ^^

merci beaucoup en tout cas pour vos réponses respective

bizzz

[Ea]

Quand il y a des ' ou " imbriqués, il faut mettre un caractère \ devant certains.

En javascript ( et dans une mesure moindre pour quelques fonctionnalités html ou css ) le caractère ' ou " permet d'indiquer le début et la fin d'une chaîne de caractère ( il faut que le caractère de fin soit le même que celui de début ).

Si on a par exemple : 'hello 'âme' igo' le navigateur va traiter ça comme :

• ' => début de chaîne
  
• hello => mot de la chaine
  
• ' => fin de chaîne
  
• âme' igo' => erreur de syntaxe

grâce au caractère \ on peut dire : le sens spécial du caractère suivant est à ignorer, donc 'hello \'âme\' igo' sera traité de la manière suivante :

• ' => début de chaîne
  
• hello => mot de la chaine
  
• \'âme\' => autre mot de la chaîne
  
• igo => autre mot de la chaîne
  
• ' => fin de chaîne

Donc pour la deuxième ligne du script, il faudrait par exemple mettre :

Code:

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\" />");

ou quelque chose comme ceci :

Code:

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" />');

[néco]

merci beaucoup Ea !
tes deux "exemples" fonctionnent à la perfection      

mais ... comme j'ai voulu voir si j'avais bien compris tes explications , je suis simplement parti de ce que me proposait MasDan , et , en rajoutant seulement deux \ (devant les deux " de sa ligne supplémentaire) ben ça marche aussi   
je sais que ça dois te sembler tout bête à toi , mais moi je suis super fier de moi d'avoir réussi   

du coup , j'ai juste mis ça :

Code:

       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' />");

et ça marche tout aussi bien   

par contre je dois avoué que je ne comprend pas vraiment pourquoi ça marche justement , parce que sur la ligne :

Code:

onClick=\"jQuery('.boutmodo').addClass('boutmodoactive')
.removeClass('boutmodo');\"

le 1er \ ok je pige , il empêche le " de terminer celui qui se trouve plus haut avant l'image ... mais le 2ième \ ? il devrait "logiquement" empêcher cette ligne en elle-même de se terminer justement  , non ?  
pourtant ça marche ! c'est bizarre je trouve !

tu saurais me l'expliquer ? (quand tu aura le temps ^^)

parce que ça marche en tout cas   

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

merci infiniment , pour tes explications ET pour ta solution   

gros bizoux à vous tous les gars

******************************

ÉDIT : d'ailleurs , dans ton explication collé ci-dessous , si je ne m'abuse , à la place de :

grâce au caractère \ on peut dire : le sens spécial du caractère suivant est à ignorer, donc 'hello \'âme\' igo' sera traité de la manière suivante :

   ' => début de chaîne
   hello => mot de la chaine
   'âme' => autre mot de la chaîne
   igo => autre mot de la chaîne
   ' => fin de chaîne

n'aurait-ce pas dû plutôt être :

   ' => début de chaîne
   hello => mot de la chaine
   'âme => autre mot de la chaîne
   'igo => autre mot de la chaîne
   ' => fin de chaîne
  

PS : en fait , sans te lancer dans de grande explication compliqué et longue , je crois que juste en affirmant ou infirmant l'exemple hello âme igo , je pigerais la question du dessus par simple déduction

re bizzz

****************

ÉDIT 2 : c'est bon , laisse tomber , ne me répond même pas je crois que j'ai compris justement en cogitant un peu par rapport à hello âme igo

en gros , si je peux dire ça comme ça ... :  le \ empêche de se fermer un truc "loin" mais ne "compte pas" pour celui qui est "juste avant"
je sais , je parle pas trop bien l'extraterrestre    , mais l'important c'est que j'ai compris
(et en plus tu perdras pas de temps à m'expliquer du coup )

je mettrais en résolu demain juste au cas où Stefou aurais une question vue que tout à l'heure il a dis que chez lui ça marchait pas

un dernier gros bizoux à toi (et à vous)

[stefou]

Salut néco,
Pour ce qui est du 2ème code, en résumé, quand tu cliques il ajoute la class boutomodoactive qui sert à afficher ton bouton bleu, et supprime la class boutmodo qui sert pour l'image de base et du survol (hover).
Car si non quand tu relâches le click souri tu passe en hover vu que ta souris est dessus.

Pour le reste, rien à ajouter, c'est super.

[néco]

merci stefou

en plus je viens de tester de remettre le :active en plus du reste , du coup j'ai 4 images pour le même bouton , et ça marche super nickel
je recolle ici le même résumé que j'ai mis sur l'autre topic

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

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/t367761-comment-faire-changer-les-boutons-d-avertissement-modo-admin-au-passage-de-la-souris-puis-au-clic-puis-apres-le-clic )

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

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