Sujet Précédent Sujet Suivant

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

[Résolu/Fermé]
Signaler
Messages postés
34
Date d'inscription
jeudi 31 mai 2007
Statut
Membre
Dernière intervention
17 janvier 2008
 -
 122 -
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
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
 913
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
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Réponse 2 / 9

Sinon il existe une autre alternative.

Vous faites faire une détection du navigateur et vous chargez une feuille de style en fonction du navigateur.
Réponse 3 / 9
Messages postés
1246
Date d'inscription
vendredi 8 octobre 2004
Statut
Contributeur
Dernière intervention
13 septembre 2019
 257
cherche sur www.w3schools.com pour les standards qui seront compatibles IE et FF
Réponse 4 / 9
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
 913
re,

Mais le :hover ne marche que sur les liens dans internet explorer
ah oui ! je l'oublie à chaque fois celle-là !

je viens de faire les essais avec '<input>' dans un lien, ça fonctionne au poil même sous IE6.
utilise cette technique plutôt que de priver les utilisateur de IE6, ils ont encore très nombreux !!!

j'ai utilisé ça : 
form a input
{
border:none;
padding-left:24px; /* pour décaler le texte, qu'il ne chevauche pas mon image*/
background-color:transparent;
cursor: pointer;
}
form a
{
background-image:url(ressources/fail.png);
background-repeat:no-repeat;
background-color:#aaa;
text-decoration:none;
}
form a:hover
{
background-image:url(ressources/success.png);
}

et 
<form action="#" method="get">
            <a href="#"><input type="submit" value="Valider" title="ok" /></a>
</form>
Réponse 5 / 9
Messages postés
34
Date d'inscription
jeudi 31 mai 2007
Statut
Membre
Dernière intervention
17 janvier 2008
 5
Oui, ,je sais qu'il ne faudrait pas mettre le <input> dans un lien...
Mais le :hover ne marche que sur les liens dans internet explorer :-/
Et pour poster mon formulaire, à part le <input>... je vois pas trop

Et effectivement, j'ai oublié le display: block; mais ca ne change rien au probleme.

Est ce qu'il est possible de poster un formulaire en cliquant sur un lien ? c'est à dire sans passer par <button> ou <input>


Dans le pire des cas, je ferais 2 cas différent entre firefox et IE, mais après je peux pas vraiment m'amuser à tester tous les navigateurs, donc je préfererais une solution "universelle".
Réponse 6 / 9
Messages postés
165
Date d'inscription
lundi 4 juin 2007
Statut
Membre
Dernière intervention
3 juillet 2008
 3
Salut à tous

Moi j'utilise un petit code javascript qui appelle un fichier js et deux image

rendu ici : http://gs-computer.eu/index.php?mod=accueil1&lang=fr

je peux te donner mon code si ça t'interesse
Réponse 7 / 9
Messages postés
34
Date d'inscription
jeudi 31 mai 2007
Statut
Membre
Dernière intervention
17 janvier 2008
 5
Merci Jérémy, mais je préfèrerais éviter le javascript.

De toute facon, a priori mon probleme à pas vraiment de solutions tel que je le souhaiterais.
A priori, la première solution doit marcher sur IE >= 6
Donc, je crois que je vais garder la première syntaxe, et les utilisateurs auront cas avoir une version d'IE >= 6 pour avoir de jolies petits effets. Sinon, ils auront cas faire comme tout le monde et installer firefox :D
Réponse 8 / 9
Messages postés
34
Date d'inscription
jeudi 31 mai 2007
Statut
Membre
Dernière intervention
17 janvier 2008
 5
Effectivement, ca marche sous IE...
Mais pas sous firefox, firefox ne prend pas le input en compte j'ai l'impression, il gère le lien et ne post pas le formulaire.

Merci quand meme :)
Réponse 9 / 9

La balise button ça existe ;) 
<button type="submit">Valider</button>


et voilà :)
Signaler
Messages postés
6
Date d'inscription
jeudi 29 mai 2008
Statut
Membre
Dernière intervention
24 juillet 2008
La balise button ça existe ;)

<button type="submit">Valider</button>


mais encore ?

Sinon je rencontre aussi la même difficulté et je n'ai toujours pas trouvé une reponse universelle à chaque navigateur.
Signaler
Messages postés
41
Date d'inscription
mercredi 28 mai 2008
Statut
Membre
Dernière intervention
2 janvier 2009
 18 >
Messages postés
6
Date d'inscription
jeudi 29 mai 2008
Statut
Membre
Dernière intervention
24 juillet 2008
 
<style type="text/css">
button {
	padding: 3px 30px;
	background-color: #FFECEC;
	border: 1px solid #990000;
}
button:hover {
	background-color: #ECFFEC;
	border: 1px solid #009900;
}
</style>
<button type="submit">Pwet</button>
Posez votre question