High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

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

Dernière réponse le 29 mai 2008 à 10:33:57 nico3fr, le 21 sep 2007 à 10:24:14 
 Signaler ce message aux modérateurs

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 ;)

Posez votre question Répondre

1

vignemail1, le 21 sep 2007 à 10:54:39

Cherche sur www.w3schools.com pour les standards qui seront compatibles IE et FF

   
Répondre à vignemail1

2

Dalida, le 21 sep 2007 à 11:07:53

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'.
[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

   
Répondre à Dalida

3

nico3fr, le 21 sep 2007 à 11:25:39

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épondre à nico3fr

4

jérémy1664, le 21 sep 2007 à 11:44:14

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épondre à jérémy1664

5

nico3fr, le 21 sep 2007 à 12:03:33
  • +1

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épondre à nico3fr

6

Dalida, le 21 sep 2007 à 12:27:23

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>
[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

   
Répondre à Dalida

7

nico3fr, le 21 sep 2007 à 14:02:06

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épondre à nico3fr

8

Keulig, le 26 déc 2007 à 17:38:59

La balise button ça existe ;) 

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


et voilà :)

   
Répondre à Keulig

9

tim974, le 29 mai 2008 à 09:01:44

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.

   
Répondre à tim974

10

 Nxt, le 29 mai 2008 à 10:33:57
  • +9

<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>

   
Répondre à Nxt
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net