bouton changeant au passage de la souris

3 participants

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

Résolu bouton changeant au passage de la souris

Message par MlleAlys Jeu 01 Nov 2012, 19:11

Bonjour/ bonsoir !

J'ai suivi ce tutoriel en ce qui concerne l'animation (très sobre) de ma barre de navigation, et je me demandais s'il était possible d'obtenir le même effet pour des boutons, par exemple "éditer" et "supprimer" se trouvant en haut des messages, ou le petit "mp" dans le profil....

J'ai essayé dans le code de remplacer "#i_icon_mini_index" etc par "#i_icon_edit" ou "#i_icon_delete" (oui c'est du bricolage dwarf ), mais cela ne fonctionne pas...
(ce qui donne ça):
Ai je fait une erreur ?
Sinon, y a t il un autre moyen d'obtenir le même effet ?


Dernière édition par MlleAlys le Lun 05 Nov 2012, 02:02, édité 3 fois
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par Manumanu Jeu 01 Nov 2012, 19:17

Bonjour,

Je n'ai pas vérifié, mais il me semble que ces boutons soient des images et non des background. Donc tout background que tu appliqueras sera sous l'image en question.

Voici une technique parmi d'autres.
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par MlleAlys Jeu 01 Nov 2012, 19:25

j'avais retiré le bouton de ma liste d'images, comme dans le cas de la barre, mais l'image n’apparaît alors tout simplement pas...

merci pour le lien, je vais aller voir =)
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par Manumanu Jeu 01 Nov 2012, 19:28

Ha, mais en ce cas qu'est-ce qui porte l'ID "i_icon_delete" ? Elles ne sont pas directement sur les images ? Dans ce cas elles ne sont carrément pas ciblées.

Sinon, par défaut il s'agit d'un élément inline, donc tu ne peux pas leur attribuer de hauteur ni de largeur, donc en l'absence d'image pour "faire" son contenu, ton élément fait 0×0px. Ajoutes donc ceci :

Code:
#i_icon_delete { display: inline-block }
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par MlleAlys Jeu 01 Nov 2012, 19:36

comme ça ?
Code:
#i_icon_delete{
  background-image:url('http://i36.servimg.com/u/f36/12/56/43/35/suppri10.png');
  display: inline-block;
  width:78px;
  height:26px;}

#i_icon_delete:hover{
  background-image:url('http://i46.servimg.com/u/f46/12/56/43/35/suppri10.png');
  display: inline-block;
  width:78px;
  height:26px;}

parce que ça ne marche pas =S


ps : le lien que tu avais mis au dessus... je n'ai pas tout compris, sauf une partie, mais qui ne concerne que les images non transparentes T-T
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par Manumanu Jeu 01 Nov 2012, 19:41

Parce que tu as dû supprimer l'image et que c'est elle qui porte l'id. Donc sans image, #i_icon_delete ne cible rien du tout. Mets-y une image "vide" de 78×26px, et ça résoudra le problème.
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par MlleAlys Jeu 01 Nov 2012, 19:52

j'ai essayé aussi, mais aucune image ne s'affiche
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par Manumanu Jeu 01 Nov 2012, 21:01

Donne le lien vers une des pages concernées s'il te plaît
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par MlleAlys Jeu 01 Nov 2012, 21:08

http://estrelane.forumactif.com/t5-modele-de-la-fiche-de-presentation

(mais il me semble quel les boutons éditer et supprimer ne sont pas visibles par les invités... Sinon, peut être en postant un sujet en tant qu'invité dans le foum questions : http://estrelane.forumactif.com/f7-questions-et-suggestions ? )

là j'ai remis l'image de départ des boutons, mais j'ai gardé le css du bouton supprimé qui ne fontionne pas (aucune image n’apparaît en dessous de la première).
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par Manumanu Jeu 01 Nov 2012, 21:18

Je n'ai aucun bouton non ; crée un compte factice (genre test/test) que tu supprimeras ensuite, que je puisse voir Wink
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par MlleAlys Jeu 01 Nov 2012, 21:23

moi ? je ne comprends pas, si je suis celle qui crée le compte, vous ne pourrez pas voir les boutons non plus, si ? ^^"


EDIT : j'ai modifié les permissions, les invités peuvent normalement éditer leurs messages dans ce forum ^^"
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par Manumanu Jeu 01 Nov 2012, 21:28

Le principe c'est que je me connecte ensuite à ce compte pour pouvoir les voir, justement. Wink
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par MlleAlys Jeu 01 Nov 2012, 21:49

même maintenant on ne voit pas de boutons dans la partie invités ?

(je galère à faire le compte, ça fait dix fois que je recommence pour des raisons diverses et variées, mais je vais y arriver ! ^^")


EDIT : mp envoyé
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par MlleAlys Sam 03 Nov 2012, 15:09

up ? ^^"
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par MlleAlys Lun 05 Nov 2012, 01:06

up
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: bouton changeant au passage de la souris

Message par Scoubifitz Lun 05 Nov 2012, 01:45

bonjour,

les boutons de message ont des class , pas des id ...

remplacez les dièses par des points :

Code:
/*BOUTON SUPPRIMER*/
.i_icon_delete{
background-image:url('http://i36.servimg.com/u/f36/12/56/43/35/suppri10.png');
width:78px;
height:26px;}
       
.i_icon_delete:hover{
background-image:url('http://i46.servimg.com/u/f46/12/56/43/35/suppri10.png');
width:78px;
height:26px;}
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: bouton changeant au passage de la souris

Message par MlleAlys Lun 05 Nov 2012, 02:02

impec, merci beaucoup !!! Very Happy

je mets le sujet en résolu
MlleAlys

MlleAlys
Membre actif

Messages : 5747
Inscrit(e) le : 12/09/2012

MlleAlys 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