Bouton de formulaire personnalisé avec l'image et le texte

Un bouton de formulaire a un 170x60 image pour les non-pressé et pressé les états. Ce que je n'arrive pas à faire est d'Y arriver à être le texte dans le bouton. Je veux vraiment éviter d'avoir à modifier l'image et écrire le texte directement. Actuellement, j'utilise:

<input type="image" src="img/button_normal.png"
 width="175" height="60" onmousedown="this.src='img/button_pressed2.png'"
 onmouseup="this.src='img/button_normal.png'">

J'ai pensé qu'il est impossible de faire ce travail avec du texte dessus (comme ce que j'ai essayé). Alors j'ai essayé à l'aide de <button> mais je ne pouvais pas le faire fonctionner non plus.

J'ai été en mesure de mettre du texte sur l'image ci-dessus, mais où le texte, le bouton est unclickable, qui ne fonctionne pas.

Qu'est ce qu'une solution à ce problème?

InformationsquelleAutor smont | 2009-11-28
  1. 2

    Alors pourquoi ne pas modifier l'image d'arrière-plan sur un bouton habituel?

    <script type="text/javascript" src="picker/js/jquery.js"></script>
<!-- some time later -->
<input type="button" src="img/button_normal.png" 
width="175" height="60" value="Some Text"
onmousedown="$(this).css({'background-image': 'img/button_pressed2.png'});" 
onmouseup="$(this).css({'background-image': 'img/button_normal.png'});">

    Qui devrait vous donner la possibilité de mettre une image dans un bouton avec du texte superposé.

    • <facepalm /> j'ai Oublié de mentionner, définissez la valeur de la propriété de l'entrée à n'importe quel texte que vous souhaitez afficher. Ci-dessus fixées.
    • Faire qui fait juste un bouton normal avec la valeur de texte :/
    • Vous pouvez utiliser le CSS pour ce. .mybutton { background-image: url('normal') } .mybutton:active { background-image: url('pressed.png') }
    InformationsquelleAutor Inaimathi
  2. 6

    La <input type="image"> est destiné à avoir une sorte d'image de la carte en tant que bouton. Lors de la soumission, il envoie un name.x et name.y paramètre pour le côté serveur qui indique l'emplacement exact où le client a insisté sur la texture de l'image.

    Manifestement, vous ne voulez pas que. Vous voulez juste avoir un bouton avec un fond image. Pour que vous utilisez normalement la CSS background-image propriété (ou, plus commodément, le background propriété).

    Exemple de base:

    .mybutton {
    background-image: url('normal.png');
    width: 175px;
    height: 60px;
}
.mybutton.pressed {
    background-image: url('pressed.png');
}

    avec le bouton normal comme suit:

    <input 
    type="submit"
    class="mybutton" 
    value=""
    onmousedown="this.className+=' pressed'"
    onmouseup="this.className=this.className.replace(' pressed', '')"
>

    Modifier: pour downvoters ou JS/jQuery nitpickers: lte IE 7 ne pas l'appui de la :hover ni :active pseudoselectors sur d'autres éléments que le a élément. La solution ci-dessus est crossbrowser compatible.

    • Le javascript, c'est superflu. Si vous venez de faire la deuxième classe CSS .monbouton:actif, il a le même effet mais sans exiger de Javascript.
    • Pourquoi êtes-vous downvoting pour un crossbrowser une solution compatible? IE lte 7 ne prend pas en charge ces pseudoselectors.
    • Hm j'ai oublié à ce sujet. Il existe de meilleures solutions que d'utiliser Javascript comme cela: xs4all.nl/~peterned/csshover.html
    • Brendan, qui est aussi une solution d'activer Javascript. Il est seulement un peu plus avancé, de sorte que c'appliquée sur tous les éléments automatiquement.
    • Regardez, vous pouvez même voir la source ici: xs4all.nl/~peterned/htc/csshover2.htc
    • Je ne pense pas que IE aime avoir une image de fond pour les boutons. Testé sous Opera, Chrome, FF et IE. IE a été le seul à avoir des problèmes.
    • Je sais que c'est, mais il ne repose que sur le Javascript sur le navigateur qui ne peuvent pas faire sans elle. Le mien fonctionne en tout, sauf IE6 si oui ou non le Javascript est activé (et il est plus facile de travailler avec, car une fois le script installé, vous pouvez simplement écrire normale CSS et il fonctionnera).

    InformationsquelleAutor BalusC
  3. 5

    Pourquoi ne pas simplement utiliser le css et un "submit" type?

    <input type="submit" class="myButton" value="Label goes here" />

    Puis dans votre CSS:

    input.myButton{
     background-image: url('img/button_normal.png');
     border-style:none;
}
input.myButton:hover{
    background-image: url('img/button_pressed2.png');
}
input.myButton:active{
    background-image: url('img/button_normal.png');
}

    Que cela ne fonctionne tout aussi bien avec le type "bouton", et a un avantage sur Javascript, des versions parce que Javascript n'est pas activé.

    Pour faire ce travail correctement dans internet explorer, vous pouvez utiliser ce script de faire IE se comporter lui-même 🙂

    • Qui n'affiche pas l'image. Un bouton avec ma valeur à l'intérieur d'elle.
    • Quel navigateur utilisez-vous? Je l'ai testé sous Firefox et Epiphany (basé sur webkit). Je n'ai pas IE :-\
    • Pas crossbrowser compatible. IE lte 7 ne prend pas en charge ces pseudoselectors.
    • J'ai mis à jour avec un lien vers un script qui l'a fait savoir le travail correctement.
    InformationsquelleAutor Reinstate Monica