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

3 participants

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

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

Message par néco Lun 12 Mai 2014 - 20:59

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

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 :
comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? 5modo10 comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? 5admin12

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

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

quelqu'un saurait me dire comment faire cela svp ?


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


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


Dernière édition par néco le Dim 18 Mai 2014 - 15:14, édité 4 fois (Raison : changer les liens d'images pour en mettre des plus réussis ^^)
néco

néco
*****

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

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

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

Message par Neptunia Lun 12 Mai 2014 - 22:36

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;
}
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17825
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

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

Message par néco Lun 12 Mai 2014 - 23:36

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  thumright 

bizzz
néco

néco
*****

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

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

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

Message par néco Mar 13 Mai 2014 - 12:48

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 Wink

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

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

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  Yes 

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

bizzz à tous
néco

néco
*****

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

Voir le profil de l'utilisateur http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.

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

Message par Chacha Mar 13 Mai 2014 - 12:57

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

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? Envoi10

A bientôt sur ForumActif Smile
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 66823
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.
  • 0

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

Message par Neptunia Mar 13 Mai 2014 - 12:59

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;
}
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17825
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

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

Message par néco Mar 13 Mai 2014 - 13:39

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

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 Wink

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

bizzz
néco

néco
*****

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

Voir le profil de l'utilisateur http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.

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

Message par néco Mar 13 Mai 2014 - 15:42

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
néco

néco
*****

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

Voir le profil de l'utilisateur http://pephenix.forumactif.org/
néco a été remercié(e) par l'auteur de ce sujet.

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

Message par Neptunia Mar 13 Mai 2014 - 15:56

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 Wink

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

Neptunia
Membre actif

Féminin
Messages : 17825
Inscrit(e) le : 08/08/2010

Voir le profil de l'utilisateur https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

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

Message par néco Mar 13 Mai 2014 - 16:04

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 Wink

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

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

-------

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 Wink


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

les voici Wink

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

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

néco
*****

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

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

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

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

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 comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? Modnor10
https://i.servimg.com/u/f55/16/13/24/40/admnor10.png comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? Admnor10

et en mode "survol" comme ça :
https://i.servimg.com/u/f55/16/13/24/40/modsur10.png comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? Modsur10
https://i.servimg.com/u/f55/16/13/24/40/admsur10.png comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? Admsur10

et au moment du "clic" comme ça (pareil que l'éditeur quoi Wink) :
https://i.servimg.com/u/f55/16/13/24/40/modcli10.png comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? Modcli10
https://i.servimg.com/u/f55/16/13/24/40/admcli10.png comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? Admcli10

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://i.servimg.com/u/f55/16/13/24/40/modfin10.png comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? Modfin10
https://i.servimg.com/u/f55/16/13/24/40/admfin10.png comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? Admfin10

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à comment faire changer les boutons d'avertissement modo/admin au passage de la souris , puis au clic , puis après le clic ? 3466187077

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

néco
*****

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

Voir le profil de l'utilisateur 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

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum