Boutons avec une image différentes par boutons

Logiciel & apps Programmation
1

Bonjour à tous,
je découvre les joie du css, au-revoir mis en page à base de tableau!!!:smiley:
j’ai donc commencé ma mise en page, en tête…
et la j’aurai souhaité terminer mon menu vertical,
qui comportera environ 3-4 boutons (c’est un petit site) mais j’aimerai avoir une image différentes sur chaque boutons
qui quand la souris survol s’anime par un gif, toutes les images sont 100x100
donc
4 boutons, pour chaque bouton une image différentes
et chaque boutons est animé lors d’un survol.

j’ai réussi avec une image pour tous les boutons, mais je ne trouve pas le code qu’il me faut sur le web pour m’aider.
je pense qu’il faut utiliser le code .button mais je vois pas comment :frowning:

si quelqu’un pouvait me guider un peu aprés je serai adapter enfin je pense pouvoir voler de mes propres ailes.

merci d’avance

CZ

2

si tu veux le faire en CSS il faut que tu mette un ID sur tes Boutons



//CODE HTML

<div id="boutons">
<input type="button" id="bouton1" ....>
<input type="button" id="bouton2" ....>
<input type="button" id="bouton3" ....>
</div>






//CODE CSS

#boutons bouton1
{
   background-image : url (tonimagefixe.png);
}
#boutons bouton1 :hover
{
  background-image : url ( tongifanimé.gif);
}


....etc pour chaque autres boutons

Cependant il aurait été pour moi plus facile de mettre les images d’arriere plan directement en HTML

Sauf erreur de ma part ceci doit marché.

3

super j’essaye ca très vite et je te dis si ca fonctionne,
je ne savais pas comment on déclare un bouton.
je sais qu’il aurait ete plus simple de le faire en html direct, mais c un peu un exercice de style. lol

4

ca ne marche pas
ca m’affiche un bouton “classique”
j’ai essayé de modifier un peu le code mais ca fait rien
:confused:

aurais tu une idée de ce qui cloche??

5

Salut,

Ca ne marche pas toujours comme on veut les styles sur les input.
Le plus souple est de faire un symple balise sur laquelle tu met un “onClick”
ex:
<button class=“bouton1” onclick=’…

6

arf oui ; dsl c’est vrai que la balise background-image ne marcher pas pour un input

par contre tu peu faire


<input type="image" src="tonimage.png" onclick="tafonctionJavascript()">

et comme ca tu na pas de bouton mais directement l’image en liens