Changement d'image au survol

[bob82]

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.

[phinolex1]

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>

[Tivia]

Bonjour

Pour moi ils ont juste fait une image avec un texte et on mis un CSS avec un background-image

Cordialement.

[bob82]

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 ?

[phinolex1]

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.

[Tivia]

Bonsoir

Il font un texte avec photoshop (photofiltre ou GIMP...) en transparence (sans fond) et ils mettent ce CSS

Code:

.i_reply:hover {
background-color: black;
}

(je n'ai jamais essayé, mais c'est surement ça, à essayer )

Cordialement.

[bob82]

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]

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

[Tivia]

Bonsoir

Il font un texte avec photoshop (photofiltre ou GIMP...) en transparence (sans fond) et ils mettent ce CSS

Code:

.i_reply:hover {
background-color: black;
}

(je n'ai jamais essayé, mais c'est surement ça, à essayer )

Cordialement.

Bonsoir

Avez-vous lu mon message

Cordialement.

[bob82]

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

[Tivia]

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

Bonsoir

je viens d'essayer et oui c'est la même chose, désolé

Cordialement.