Sujet Précédent Sujet Suivant

Changer l'arrière plan d'un bouton (CSS)

Résolu/Fermé
nico3fr Messages postés 34 Date d'inscription jeudi 31 mai 2007 Statut Membre Dernière intervention 17 janvier 2008 - 21 sept. 2007 à 10:24
 122 - 8 déc. 2016 à 12:23
Bonjour,

Je souhaiterais créer un bouton dans un formulaire qui change d'état lorsque l'on passe la souris dessus.
Rien de vraiment dur dis comme ca...

Les contraintes :
- Que ca marche sous IE et Firefox
- Pas de javascript

Et voici mes problèmes plus en détails, ca expliquera certainement mieux ce que je souhaite et les problèmes rencontrés.

Tout d'abord du code qui marche sous firefox... Mais pas sous internet explorer 
<?php
  if (isset($_POST['ma_variable']))
    print("post ok<br>");
  if (isset($_POST['ma_variable']) && (!empty($_POST['ma_variable']))){
    extract($_POST);  // On réccupère les données du _POST qu'on place dans des variables $recrut, etc...
    print("ma_variable : $ma_variable<br>");
  }

?>

<html>
  <head>
    <title>Page web</title>
  </head>
  
    <style type="text/css">
    button {
      background-color: transparent;
      background-image: url(images/bouton.png);
      background-repeat: no-repeat;
      width: 120px;
      height: 14px;
      margin: 5px auto;
      border: none;
      text-align: center;
      font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
      font-size: 11px;
      text-decoration: none;
    }

    button:hover, button:active {
      background-image: url(images/bouton.png);
      color: #FF7200;
    }
    </style>
  
  
  <body>
  <br><p>Une simple bouton sur une page...<br></p><br>
    <form method="post" action="firefox.php">
      <button type="submit" value="1" name="ma_variable" class="button">1</button>
    </form>
    <a href="firefox.php">Recharger la page sans post</a>
  </body>
</html>


Et ici du code qui "marche" sous IE, mais pas sous firefox 
<?php
  if (isset($_POST['ma_variable']))
    print("post ok<br>");
  if (isset($_POST['ma_variable']) && (!empty($_POST['ma_variable']))){
    extract($_POST);
    print("ma_variable : $ma_variable<br>");
  }

?>

<html>
  <head>
    <title>Page web</title>
  </head>
  
    <style type="text/css">
    .button_cache{
      width: 120px;
      height: 14px;
      background: transparent;
      border: 0px;
      text-decoration: none;
      font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
      font-size: 11px;
      padding: 0px; 
      text-align: center;
    }
    
    a.button {
      background-color: transparent;
      background-image: url(images/bouton.png);
      background-repeat: no-repeat;
      width: 120px;
      height: 14px;
      margin: 5px auto;
      border: none;
      text-align: center;
      font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;
      font-size: 11px;
      text-decoration: none;
    }

    a.button:hover, a.button:active {
      background-image: url(images/bouton2.png);
      color: #FF7200;
    }
    </style>
  
  
  <body>
  <br><p>Une simple bouton sur une page...<br></p><br>
    <form method="post" action="ie.php">
      <a href="" class="button"><input type="submit" value="1" name="ma_variable" class=button_cache></a>
    </form>
  </body>
</html>


Alors les explications maintenant.
Dans le premier cas, celui qui marche sous firefox et pas sous IE, c'est visiblement à cause du fait que l'attribut :hover ne s'applique qu'a une balise "lien" (<a href="blabla">) sous internet explorer, alors que firefox semble donné un peu plus de liberté.
Donc sous IE, je n'arrive pas à voir ma seconde image de fond, ni le changement de couleur appliqué dans la class button:hover

Donc j'ai essayé de tricher un peu avec la 2e méthode, qui semble fonctionner sous IE (juste la couleur du lien qui ne fonctionne pas avec le hover (color: #FF7200)). Sinon, il charge correctement l'image bouton2.png lorsque je passe la souris sur le bouton.
Par contre, le gros probleme sous firefox, c'est qu'il semble favoriser la balise du lien <a> par rapport à la balise <input>, donc en fait, il n'envoie pas de formulaire lorsque je clique sur le bouton...

Enfin, bref, j'ai l'impression de tourner un peu en rond depuis hier. Donc si quelqu'un à une solution qui marche sous les 2 systemes, ca m'interesse grandement.

Merci

PS: Je sais pas si j'ai été très clair, hésitez pas à poser des questions ;)

9 réponses

Réponse 1 / 9
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 922
21 sept. 2007 à 11:07
salut,

il ne faudrait mettre le '<input>' dans un lien, cela n'a pas de sens.

donc essai de coder le même comportement mais sur le '<input>'.
sinon pour le défaut d'affichage, je pense qu'il manque un {display:block;} dans le sélecteur 'a.button'.
5

Discussions similaires

CSS/Comment enlever couleur liens ?
alexou1984 -
Tonio -

6 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
HTML remonter en haut d'une page
miklb -
ufuly -

10 réponses
[CSS] couleur des bouton radios
Maxg59 -
deric -

11 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
html : taille d'un bouton
Claire -
Stéphane -

4 réponses