Pb de class sur un bouton

[emc2]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forumfrance.forumactif.fr/

Description du problème

Bonsoir,

Toujours dans la catégorie: "J'ai un problème avec mes class !"
Je n'arrive pas à retrouver la class qui correspond au bouton "répondre" lorsque l'on est dans la messagerie privée.
En effet, tant qu'il s'agit de rendre le bouton "répondre" du forum en dynamique, j'utilise ce codde dans mon css:

Code:

.i_reply{
background-image: url('http://i74.servimg.com/u/f74/18/86/39/02/repond10.png');
  width:78px; /* Largeur de l'image */
  height:30px; /* Hauteur de l'image */
}
.i_reply:hover{
background-image: url('http://i74.servimg.com/u/f74/19/04/22/29/repond10.png');
 /* Largeur et hauteur déjà définie dans i-post */
}

Avec bien sûr la désactivation de l'image dans la gestion des images. Malheureusement, cela fait disparaître également le bouton "répondre" de la messagerie, et la class ne semble pas être la même.
Je suis allé voir dans le fichier source, et je n'ai pas su la retrouver. Je pense qu'elle n'est pas mentionnée, ou bien la valeur de cette class doit changer pour chaque message privé.
Quelqu'un peut-il m'aider sur ce problème ? Merci d'avance.

[Scoubifitz]

bonjour,

on peut aussi utiliser une seule image pour le bouton normal et survolé :



En affichage normal , le haut de l'image apparait . Au survol , le bas de l'image apparait ...

... et s'il n'y a pas de class ou d'identifiant , on peut regarder s'il y a un texte alternatif (alt) ...

Remplacez votre code par celui-ci :

Code:

img[alt="Répondre au sujet"],img[alt="Répondre au message"]{
background: url('http://i59.servimg.com/u/f59/12/14/82/30/repond10.png') top;
width:78px; /* Largeur de l'image */
height:30px; /* Hauteur de la moitié de l'image */
}
img[alt="Répondre au sujet"]:hover,img[alt="Répondre au message"]:hover{
background-position: bottom; /* position du sprite */
/* Largeur et hauteur déjà définie dans i-post */
}

(fonctionne sur phpBB 2 et phpBB 3)

[emc2]

Cela fonctionne parfaitement, et je rajouterais que la transition me paraît plus douce entre les deux images.
Ce qui m'ennuie, c'est que je n'ai pas bien saisi la mécanique du code.
J'ai compris qu'une seule image où apparaît les deux boutons est placée dans le background sans survol, mais que l'on sélectionne que le haut (top).
Mais quelle est le code qui fait apparaître que le bas de l'image au survol de la souris ?

[Scoubifitz]

En créant un cadre d'une certaine dimension , et en déplaçant l'image de fond dans ce cadre avec "background-position" ...

pour le bouton normal , on a :

background: url('https://i.servimg.com/u/f59/12/14/82/30/repond10.png') top;

donc , une image de fond placée par rapport au haut du cadre (et centrée , si ce n'est pas précisé)

pour le bouton survolé :

background-position: bottom;

donc , une image de fond placée par rapport au bas du cadre ...

l'image fait 60 pixels de haut , donc le cadre devra faire 30 pixels de haut ...

vous pouvez tester avec :

background-position: center;

pour le survol , ça permet de mieux comprendre l'effet .

l'avantage est : moins d'images à héberger , l'effet est immédiat .

[emc2]

C'est limpide ! Je mets en "résolu" le sujet.