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