Ce tutoriel a été publié par ze_chaofan sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Hello hello...
Les membres du SF les plus attentifs auront remarqué le système de survol pour les boutons du forum.
Pour ceux qui n'auraient pas vu :


Voici donc comment faire pour vos forums, en ne passant que par le CSS.
Normalement, le tutoriel est compatible toutes les versions, néanmoins je ne l'ai pas encore testé pour punBB et Invision (donc, pour tout ce qui est phpbb, ça marche).

Pour chaque bouton auquel vous appliquerez le système, vous devrez procéder ainsi :

(1) Envoyez vos deux images, la normale et celle du survol (de dimensions identiques).

(2) Collez ceci dans votre CSS (vous compléterez en fonction du bouton) :

.intitulé {background-image: url('adresse_image_normale'); background-position: top center; background-repeat: no-repeat; width: Xpx; height: Ypx;}
.intitulé:hover {background-image: url('adresse_image_survol'); background-position: top center; background-repeat: no-repeat; width: Xpx; height: Ypx;}

Remplacez : X par la largeur des images en pixels, Y par leur hauteur en pixels.

(3) Dans le PA, retirez l'image correspondante (mettez une image vide donc), puis validez.


Maintenant, pour les intitulés à compléter :
• Citation (message) : .i_icon_quote
• Edition (message) : .i_icon_edit
• Suppression (message) : .i_icon_delete
• Voir l'IP (message) : .i_icon_ip
• Profil du membre (profil) : .i_icon_profile
• Envoyer un MP (profil) : .i_icon_pm

• Poster un nouveau message (partout) : #Newtopic, #one, #i_post, #i_post1, .i_msg_newpost
Pour le deuxième intitulé, retirez le :hover et mettez :
#Newtopic:hover, #one:hover, #i_post:hover, #i_post1:hover, .i_msg_newpost:hover

• Répondre au sujet (partout) : .replying
Dans le panneau d'admin, mettez cette image pour le bouton :
https://2img.net/i/fa/empty.gif" class="replying

La liste des boutons sur lesquels ce tuto est applicable s'agrandira au fur et à mesure.

Merci

merci beaucoup pour le tutorial mais au lieu de faire deux image différentes on pourrait simplement faire qu'une seul image grande qui regroupera les deux comme sur les vraix phpbb
les codes seraient :

.intitulé {background-image: url('adresse_image_normale'); background-position: top; background-repeat: no-repeat; width: Xpx; height: Ypx;}

.intitulé:hover {background-image: url('adresse_image_normale'); background-position: bottom; background-repeat: no-repeat; width: Xpx; height: Ypx;}

T'en pense quoi ?

J'ai essayé mais ça marche pÔ !! qu'est-ce que tu entends par "Dans le PA, retirez l'image correspondante (mettez une image vide donc), puis validez." ?

L'image de survol doit-elle être la même (mais transformée) que celle de l'image normale ?

Et dernière question , le X et le Y doivent correspondre à la taille normale des images choisies ?

Bonjour à tous et merci ZC pour l'astuce !

Tyli,

Tyli a écrit:qu'est-ce que tu entends par "Dans le PA, retirez l'image correspondante (mettez une image vide donc), puis validez." ?

PA >> Affichage >> Images & Couleurs >> Gestion des images > Mode avancé > Boutons > Supprimer l'url correspondante (elle se met automatiquement en url_image_vide)

Tyli a écrit:L'image de survol doit-elle être la même (mais transformée) que celle de l'image normale ?

Nope, tu mets les images que tu veux puisqu'elles seront dès lors gérée par le CSS.

Et dernière question , le X et le Y doivent correspondre à la taille normale des images choisies ?[/quote]Oui et non, là encore tu fais comme tu le souhaites.

Du c'est keskeu j'ai compris !

Merci Final_blond


Donc j'avais tout bon mais ça ne fonctionne quand même pas !


J'ai fais un essai avec le bouton "éditer" avec en survol un smiley (juste pour le fun ), le bouton "éditer" a disparu

Code:

 .icon_i_edit {background-image: url('http://hitskin.com/themes/13/49/22/i_icon_edit.png'); background-position: top center; background-repeat: no-repeat; width: 81px; height: 25px;}

.icon_i_edit:hover {background-image: url('http://2img.net/i/fa/i/smiles/affraid.gif'); background-position: top center; background-repeat: no-repeat; width: 19px; height: 25px;}


Hello...

Mes excuses, je me suis trompé avec les intitulés, ce n'est pas .icon_i_edit mais .i_icon_edit !
Je corrige...

Pour ton bouton, cela donne :

.i_icon_edit {background-image: url('http://hitskin.com/themes/13/49/22/i_icon_edit.png'); background-position: top center; background-repeat: no-repeat; width: 81px; height: 25px;}

.i_icon_edit:hover {background-image: url('https://2img.net/i/fa/i/smiles/affraid.gif'); background-position: top center; background-repeat: no-repeat; width: 19px; height: 25px;}

Et en réglant un petit peu pour éviter le décalage entre tes deux images :

.i_icon_edit {background-image: url('http://hitskin.com/themes/13/49/22/i_icon_edit.png'); background-position: top center; background-repeat: no-repeat; width: 81px; height: 25px;}

.i_icon_edit:hover {background-image: url('https://2img.net/i/fa/i/smiles/affraid.gif'); background-position: top center; background-repeat: no-repeat; width: 81px; height: 25px;}

Whaouuu tu assures ze-chaofan


Merci , t'es un chef