[PHPBB3] Modifer les boutons : citer editer pour rollover

Hello Mimosas,

as tu des images (a part le citation multiple) a me fournir pour le hover que je fasses des essais.

Autre point important,
afin d'avoir un résultat parfait, il est impératif que les images soient identiques en dimensions .

Pour le "hover" pas de soucis j'ai -un peu- pratiqué tout çà , je faisais également usage de sprites    alors oui: de la rigueur.
Pour les modèles ils sont : >ICI<

Pour ma part ce ne sont pas les "zimages" qui me turlupinent mais la difficulté pour modifier un théme avec forum actif.
J'étais plus à l'aise avec phpBB que je "travaillais" en local ---> avant.
Mais bon on va faire avec !

Merci,
mais je veux que les images qui vont être affichées au survol pas celles
déposées dans ton P.A.
Comme le bouton Multicitation par exemple

On pourra le faire que par du Javascript Mimosas


Test ce script pour voir:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher Sur les sujets


Déposer ceci:

Code:


$(function(){
$('img[alt="Sélectionner/Désélectionner multi-citation"]').each(function(){
var $this=$(this);
var multi=$this.attr('src');
$this.hover(function(){
//le lien de image du bouton multicitation au survol entre les " "
var multiover="https://i.servimg.com/u/f20/20/11/87/27/cita_m10.png";
$this.attr('src',multiover);
},function(){
$this.attr('src',multi);});});});


Penser a cliquer sur le bouton



L'image que tu veux avoir au survol se trouve dans le script ici:

Code:


//le lien de image du bouton multicitation au survol entre les " "
var multiover="https://i.servimg.com/u/f20/20/11/87/27/cita_m10.png";


Donc si tu en veux une autre, il faudra supprimer le lien de l image ici:
https://i.servimg.com/u/f20/20/11/87/27/cita_m10.png

Et remplacer par celle que tu souhaites

Salut,

Tu me demande les images et, je te les aient jointes en .zip
Pour être plus précis, voici ma procédure :
Je n'ai aucune images dans mon PA si ce n'est:  https://2img.net/i/fa/empty.gif le petit transparent de 1pxX1px.
Toutes sont sur le css :

Code:

.i_reply {
    width: 140px;
    height: 32px;
    background: url('adresse de mon image.png') no-repeat;
}
.i_reply:hover {
    width: 140px;
    height: 32px;
    background: url('adresse de mon image');
}

Image que j'ai ensuite converties en data -pour toutes ou presque.

Code:

.i_reply:hover {
    width: 109px;
    height: 25px;
    background: url(data:image/png;base64,iVBORw0K.... blablabla...CC) no-repeat;}

Voilà mon but:

Faire un rollover exclusivement en data pour la bonne raison que :
1) j'ai perdue pas mal d'image chez "servimg" lors d"une de leurs intervention.
Et que pour moi le data reste une solution plus simple à corriger que le sprite (mon avis).

Donc pas d'image dans le PA:

Ah ben merci pour le complément d'information, je ne pouvais pas le savoir que tu n'avais aucune
image dans ton P.A.
Je ne suis pas devin .
Bref,
la css ainsi devrait fonctionner:

Code:

a[href$="mode=quote"] img.i_icon_quote
{
    width: 140px!important;
    height: 32px;
    background: url('https://i.servimg.com/u/f20/20/11/87/27/citer10.png') no-repeat;
}


a[href$="mode=quote"]:hover img.i_icon_quote
{
    width: 140px!important;
    height: 32px;
    background: url('https://i.servimg.com/u/f20/20/11/87/27/citer210.png') no-repeat;
}


Il faut jouer avec le lien précédent l'image et surtout garder bien en tête que les images sont prioritaires sur l'action.

Car l'image réponse sera toujours identique même si le sujet est verrouiller par exemple .

Ok, tout ça, sans javascript ?
Avec juste :

Code:


/*Bouton Citer*/
a[href$="mode=quote"]
/*Bouton Edit*/
a[href$="mode=editpost"]
/*Bouton supprimer*/
a[href$="mode=delete"]


etc ... placé devant ?
Pour le :  img.i_icon_quote {  ---> j'suis moins sur j'ai fait mes rollover avec juste un : .i_post:hover {
je verrais cà .

ah ,Et le fameux + : !important (du css3 ??) ; mais pourquoi sur la largeur ..

Je testerais demain car là ce soir: «j'ai apéro.»

 YES !!! Cà Mmmaaaaarche !!

Alors voici le résultat :


Et la méthode pour phpbb3

PA - Affichage - Gestion des images - Mode Avancé -  sélectionner :  Boutons (si c'est des boutons)
Remplacez-la ou les images par :  https://2img.net/i/fa/empty.gif une image transparente de 1px par 1px.
➞ ENREGITRER

Puis sur la même page cliquer sur Couleur - onglet : Feuille de css
Noter qu'il est indispensable de connaitre le "mode" ainsi que la "class" de votre image cliquable. Un simple clic droit dans votre navigateur suffit - Examiner l'Élément ces informations obtenues;

Ajouter à la css :

Code:

   a[href$="mode=LE MODE"] .i_icon_quote «««« LA CLASSE
    {
        width: 140px; «««««« la largeur de votre image
        height: 32px; «««««« la hauteur de votre image
        background: url('L'adresse de votre image') no-repeat;
    }


    a[href$="mode=LE MODE"]:hover .i_icon_quote «««« le rollover et LA CLASSE
    {
        width: 140px; «««««« la largeur de votre image
        height: 32px; «««««« la hauteur de votre image
        background: url('L'adresse de votre image') no-repeat;
    }


Voici ce que çà donne sur ma css :


Il est très simple de tout basculer en data sans grosses modifications.


Alors, je n'ai qu'un mot à dire : MERCI !!
Sans compter que j'ai appris l’existence du sélecteur d'attribut !

De rien Mimosas ,

merci pour le petit tutoriel qui servira peut être à un membre de la communauté.