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

CA devrait etre

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

Donc "image" au lieu de "soumettre". Ce sera toujours un bouton qui sera envoyé sur le clic.

Si votre image est plus grande que le bouton affiché; Disons que l'image est de 200×200 pixels; Ajoutez ceci à votre feuille de style:

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

Ou directement dans la balise de bouton:

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

Notez cependant que le redimensionnement de l'image comme celui-ci pourrait ne pas donner des résultats idéaux; Si, par exemple, votre image est beaucoup plus petite que vous le souhaitez, vous verrez les pixels simples; Si, d'autre part, il est beaucoup plus grand, vous perdez de la bande passante précieuse de vos utilisateurs. Le redimensionnement de l'image elle-même à la taille réelle est préférable sur le rééchelonnement via des feuilles de style!

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

 <button type="submit"><img src="/path/to/image" alt="Submit"></button> 

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

Vous pouvez utiliser certains CSS en ligne comme celui-ci

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

Doit faire la magie, vous pouvez aussi faire une bordure: aucune; Pour se débarrasser des frontières standard.

Vous pouvez également essayer quelque chose comme ça aussi

 <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 est donné ici

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

 <input type="image" src="/library/graphics/cecb2.gif"> 

 <input type= "image" id=" " onclick=" " src=" " /> 

Ça marche.

 <a href="#"> <img src="p.png"></img> </a>