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

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

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

Message par néco le Mer 14 Mai 2014 - 18:35

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 : http://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 ?  Question 

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

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

merci par avance  Smile 

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 Wink
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


Dernière édition par néco le Dim 18 Mai 2014 - 15:37, édité 6 fois

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par stefou le Mer 14 Mai 2014 - 19:49

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...

stefou
*****

Masculin
Messages : 894
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: comment faire changer l'image d'un bouton après avoir cliqué dessus svp ?

Message par néco le Mer 14 Mai 2014 - 20:53

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

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par stefou le Mer 14 Mai 2014 - 21:18

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
*****

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

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

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

Message par stefou le Mer 14 Mai 2014 - 21:27

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

stefou
*****

Masculin
Messages : 894
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: comment faire changer l'image d'un bouton après avoir cliqué dessus svp ?

Message par néco le Mer 14 Mai 2014 - 21:40

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 Wink

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


Dernière édition par néco le Mer 14 Mai 2014 - 22:33, édité 1 fois

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par stefou le Mer 14 Mai 2014 - 21:46

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

stefou
*****

Masculin
Messages : 894
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: comment faire changer l'image d'un bouton après avoir cliqué dessus svp ?

Message par néco le Mer 14 Mai 2014 - 21:52

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 Wink

bizzz et merci encore ^^

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par stefou le Jeu 15 Mai 2014 - 0:00

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 à Mr. Green  chercher


Dernière édition par stefou le Jeu 15 Mai 2014 - 0:08, édité 1 fois

stefou
*****

Masculin
Messages : 894
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: comment faire changer l'image d'un bouton après avoir cliqué dessus svp ?

Message par néco le Jeu 15 Mai 2014 - 0:05

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 Wink

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 Wink

re bizoux

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par stefou le Jeu 15 Mai 2014 - 10:08

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

stefou
*****

Masculin
Messages : 894
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: comment faire changer l'image d'un bouton après avoir cliqué dessus svp ?

Message par néco le Jeu 15 Mai 2014 - 11:11

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 Wink

encore merci en tout cas pour ta patience et ta gentillesse  sunny 

bizzz

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par stefou le Jeu 15 Mai 2014 - 12:36

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  Shocked ) 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
*****

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

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

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

Message par stefou le Jeu 15 Mai 2014 - 20:04

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  Wink

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

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"

stefou
*****

Masculin
Messages : 894
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: comment faire changer l'image d'un bouton après avoir cliqué dessus svp ?

Message par néco le Jeu 15 Mai 2014 - 22:44

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 !  Embarassed 

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

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par stefou le Jeu 15 Mai 2014 - 22:58

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

stefou
*****

Masculin
Messages : 894
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: comment faire changer l'image d'un bouton après avoir cliqué dessus svp ?

Message par néco le Jeu 15 Mai 2014 - 23:45

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

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par MasDan le Ven 16 Mai 2014 - 1:57

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.

MasDan
*****

Masculin
Messages : 856
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par stefou le Ven 16 Mai 2014 - 8:51

Super MasDan  thumleft 

stefou
*****

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

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

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

Message par stefou le Ven 16 Mai 2014 - 12:17

Bonjour,
chez moi le js ne fonctionne pas  scratch 

stefou
*****

Masculin
Messages : 894
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: comment faire changer l'image d'un bouton après avoir cliqué dessus svp ?

Message par néco le Sam 17 Mai 2014 - 12:19

stefou , ce que donne MasDan c'est pas le js c'est le widget Wink(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 Sad

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

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

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 ' Wink)

mais dans les deux cas , le dollar deviens
Code:
$
... donc ça ne marche pas Sad

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

merci beaucoup pour ta réponse en tout cas Wink

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 Wink)


re bizzz

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Ea le Sam 17 Mai 2014 - 13:09

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 :
http://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.

Ea
Aidactif
Aidactif

Messages : 23442
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

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

Message par néco le Sam 17 Mai 2014 - 13:54

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 Wink ) )

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 Smile

bizzz

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Ea le Sam 17 Mai 2014 - 14:18

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

Ea
Aidactif
Aidactif

Messages : 23442
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

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

Message par néco le Sam 17 Mai 2014 - 15:20

merci beaucoup Ea !
tes deux "exemples" fonctionnent à la perfection  Yes Bravo2 ::fete:: Yes 

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  Twisted Evil 
je sais que ça dois te sembler tout bête à toi , mais moi je suis super fier de moi d'avoir réussi  Embarassed 

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  ::fete:: 

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 ? scratch 
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  scratch 

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

merci infiniment , pour tes explications ET pour ta solution  cheers 

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
 Question 

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 Wink

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 Wink

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  Mr. Green  , mais l'important c'est que j'ai compris Laughing
(et en plus tu perdras pas de temps à m'expliquer du coup Wink)

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 Wink

un dernier gros bizoux à toi (et à vous)

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par stefou le Sam 17 Mai 2014 - 16:26

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.

stefou
*****

Masculin
Messages : 894
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: comment faire changer l'image d'un bouton après avoir cliqué dessus svp ?

Message par néco le Dim 18 Mai 2014 - 15:08

merci stefou Wink

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 Yes
je recolle ici le même résumé que j'ai mis sur l'autre topic Wink

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

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 : http://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://i55.servimg.com/u/f55/16/13/24/40/modnor10.png
https://i55.servimg.com/u/f55/16/13/24/40/admnor10.png

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

et au moment du "clic" comme ça (pareil que l'éditeur quoi Wink) :
https://i55.servimg.com/u/f55/16/13/24/40/modcli10.png
https://i55.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 Wink)

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 Wink)

j'ai voulu faire une image qui reproduit en miniature le cadre qui sera poster dans le post en utilisant le bouton d'avertissement Wink)
voici donc ces images :
https://i55.servimg.com/u/f55/16/13/24/40/modfin10.png
https://i55.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 Wink

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 Wink

bizzz à tous

néco
*****

Féminin
Messages : 782
Inscrit(e) le : 13/02/2013

http://pephenix.forumactif.org/
néco 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