Changement d'image au survol

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

Résolu Changement d'image au survol

Message par bob82 le Sam 15 Mar 2014 - 18:38

Salut,

J'aimerai faire ça sur le bouton "Poster un nouveau sujet" (Gestion des images/Boutons) et j'ai vu sur d'autres forums que c'était possible avec une seule image, comme celle-ci par exemple :



J'ai examiné l'élément mais j'avoue ne rien y comprendre.


Dernière édition par bob82 le Sam 15 Mar 2014 - 21:00, édité 1 fois

bob82
*

Masculin
Messages : 41
Inscrit(e) le : 21/12/2012

http://betamus.forumactif.org/
bob82 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement d'image au survol

Message par phinolex1 le Sam 15 Mar 2014 - 18:53

Bonjour,

C'est une image multiple. ( Lien de l'image avec position x,y )

La façon la plus simple ( selon moi ) serait de séparer l'image en deux partie ( bouton 1 & bouton 2 ).

Voici le code :
Code:
<a href=><img src="http://i.imgur.com/MJtaXcm.png"
onmouseover="src='http://i.imgur.com/LaCTmEW.png'" onmouseout="src='http://i.imgur.com/MJtaXcm.png'"
height="100" width="38" ></a>

phinolex1
****

Messages : 479
Inscrit(e) le : 14/01/2012

http://www.tibiland.net
phinolex1 a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Changement d'image au survol

Message par bob82 le Sam 15 Mar 2014 - 19:39

Merci phinolex par contre ça ne rentre pas dans le tableau, l'adresse est trop longue.

Tu pourrais m'en dire plus sur cette méthode Tivia stp ?

bob82
*

Masculin
Messages : 41
Inscrit(e) le : 21/12/2012

http://betamus.forumactif.org/
bob82 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement d'image au survol

Message par phinolex1 le Sam 15 Mar 2014 - 19:52

Voici le nouveau code :

Code:
<a href=www.votre-forum.com/post?f=3&mode=newtopic><img src="http://i.imgur.com/MJtaXcm.png"
onmouseover="src='http://i.imgur.com/LaCTmEW.png'" onmouseout="src='http://i.imgur.com/MJtaXcm.png'"
height="100" width="38" ></a>

/ ! \ À modifier / ! \

www.votre-forum.com/post?f=3&mode=newtopic

Remplacer " www.votre-forum.com " par le lien de votre forum.

Le chiffre 3, c'est le numéro de votre catégorie.

phinolex1
****

Messages : 479
Inscrit(e) le : 14/01/2012

http://www.tibiland.net
phinolex1 a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Changement d'image au survol

Message par bob82 le Sam 15 Mar 2014 - 20:07

Excuses moi phinolex mais je ne comprend pas où tu mets le code, car ce n'est pas du CSS et le code est trop long pour rentrer dans le tableau (Affichage/Gestion des images/Boutons).

bob82
*

Masculin
Messages : 41
Inscrit(e) le : 21/12/2012

http://betamus.forumactif.org/
bob82 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement d'image au survol

Message par bob82 le Sam 15 Mar 2014 - 20:45

Je viens de trouver avec la méthode d'une seule image, je laisse le code si il y a des personnes intéressés :

Code:
img.i_post {
background:url('http://i.imgur.com/PDMEJfF.png') no-repeat ;
width: 100px ;
height: 38px ;
display:block ;
}
img.i_post:hover {
background-position: bottom center ;
}

cette exemple est pour le bouton "Poster un nouveau sujet" (img.i_post)

à modifier :
- l'url de l'image
- les dimensions de l'image (pour "height" mettre la moitié de la hauteur)

ne pas oublier de supprimer l'image si vous en avez une dans Affichage/Gestion des images/Boutons.

Merci à tous les 2 Wink

bob82
*

Masculin
Messages : 41
Inscrit(e) le : 21/12/2012

http://betamus.forumactif.org/
bob82 a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

Résolu Re: Changement d'image au survol

Message par bob82 le Sam 15 Mar 2014 - 20:51

Oui merci Tivia mais ça revient à la même chose non ?

bob82
*

Masculin
Messages : 41
Inscrit(e) le : 21/12/2012

http://betamus.forumactif.org/
bob82 a été remercié(e) par l'auteur de ce sujet.

L'auteur de ce message est actuellement banni du forum - Voir le message

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