Comment mettre un jpg ou png image dans un bouton en HTML

Je veux un bouton avec une image. Je suis en utilisant ceci: 

<input type="submit" name="submit" src="images/stack.png" />

Mais il ne montre pas l'image. Je veux que le bouton à l'image.

InformationsquelleAutor Rizvan | 2011-12-13
  1. 16

    Il devrait être

    <input type="image" id="myimage" src="[...]" />

    Donc "image" au lieu de "envoyer". Il sera toujours un bouton qui envoie sur cliquez sur.

    Si votre image est plus grande que le bouton qui est montré; disons que l'image est de 200x200 pixels; ajouter à votre feuille de style:

    #myimage {
    height: 200px;
    width: 200px;
}

    ou directement dans la balise button:

    <input type="image" id="myimage" style="height:200px;width:200px;" src="[...]" />

    Note cependant que le redimensionnement de l'image comme cela ne risque pas de produire des résultats parfaits; par exemple, si votre image est beaucoup plus petit que vous le souhaitez, vous pourrez voir les pixels; si, en revanche, il est beaucoup plus grand, que vous perdez de précieuses de la bande passante de vos utilisateurs. Si le redimensionnement de l'image elle-même à la taille réelle est à préférer au cours du changement d'échelle via les feuilles de style!

    • Sa ne marche pas mec, même j'ai donné cette aussi 🙂
    • C'est de travailler poster votre code (modifier votre question) et nous allons voir où vous vous êtes trompé.
    • par "pas de travail", que voulez-vous dire exactement? Est l'image ne s'affiche pas, ou n'est-il pas cliquable, ...?
    • ya ses cliquables et la partie de l'image seulement visible
    • Si votre problème est la taille du bouton? Essayez d'ajouter un peu de css (voir changé réponse)
    • ya mec je vais utiliser merci 🙂 u r bonne

    InformationsquelleAutor codeling
  2. 14

    Vous pouvez définir le style du bouton à l'aide de CSS ou utiliser une image d'entrée. En outre, vous pouvez utiliser le button élément qui prend en charge du contenu en ligne.

    <button type="submit"><img src="/path/to/image" alt="Submit"></button>
    • "<button> éléments sont beaucoup plus faciles à coiffer que <input> éléments. Vous pouvez ajouter intérieure du contenu HTML (pensez <em>, <strong> ou même <img>), et de faire usage de :after et :before pseudo-élément pour obtenir un rendu complexe tout en <input> accepte uniquement un texte de la valeur de l'attribut." Source: MDN
    InformationsquelleAutor nikc.org
  3. 5

    Utilisation <button> élément au lieu de <input type=button />

    InformationsquelleAutor eas
  4. 4

    Vous pouvez utiliser du CSS comme ceci

    <input type="submit" name="submit" style="background: url(images/stack.png); width:100px; height:25px;" />

    Devrait faire de la magie, vous pouvez aussi envie de faire un border:none; se débarrasser de la norme frontières.

    • Ou de créer une classe dans votre feuille de style CSS fichier et l'utiliser ;o)
    • si j'utilise ur de code-il partie de mon image et non l'ensemble de l'image et j'ai essayé avec une largeur & hauteur du bouton ...Nan pas de travail
    • il prend beaucoup de temps, mais ya vais essayer pour que .. merci mec:)
    InformationsquelleAutor MartinElvar
  5. 3

    vous pouvez également essayer quelque chose comme cela ainsi

    <input type="button" value="text" name="text" onClick="{action}; return false" class="fwm_button">

    et classe CSS 

    .fwm_button {
   color: white;
   font-weight: bold;
   background-color: #6699cc;
   border: 2px outset;
   border-top-color: #aaccff;
   border-left-color: #aaccff;
   border-right-color: #003366;
   border-bottom-color: #003366;
 }

    Un exemple en est donné ici

    • Mais la question est de savoir comment mettre une image sur un bouton (ou, de manière efficace, comment faire pour utiliser une image comme un bouton).
    • ya je vais essayer ur code maintenant
    • ya merci pour ce travail
    InformationsquelleAutor GustyWind
  6. 2

    Cela peut fonctionner pour vous, essayez-le et voyez si cela fonctionne:

    <input type="image" src="/library/graphics/cecb2.gif">
    • ses un bouton de soumission, donc...
    • ...donc, essayez et vous verrez que cela fonctionne.
    InformationsquelleAutor Royi Namir
  7. 0
    <input type= "image" id=" " onclick=" " src=" " />

    il fonctionne.

    InformationsquelleAutor vikas agrahari
  8. -1
    <a href="#">
        <img src="p.png"></img>
    </a>
    InformationsquelleAutor Hammad Hassan