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

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 le 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 :
http://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 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
*****

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

Message par Neptunia le 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
+ Hyperactif +

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

http://www.planet-series.com/
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 le 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
*****

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

Message par néco le 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
*****

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.

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 le Mar 13 Mai 2014 - 12:57

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 résolu
  • Et enregistrer en cliquant sur

A bientôt sur ForumActif Smile


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

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

http://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 le 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
+ Hyperactif +

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

http://www.planet-series.com/
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 le 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
*****

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.

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

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.

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 le 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
+ Hyperactif +

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

http://www.planet-series.com/
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 le 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 ^^

 

-------

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



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

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

Message par néco le 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 : http://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 :
http://i55.servimg.com/u/f55/16/13/24/40/modnor10.png
http://i55.servimg.com/u/f55/16/13/24/40/admnor10.png

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

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