web-dev-qa-db-fra.com

Puis-je ajouter une image à un bouton ASP.NET?

Je veux ajouter une image, au lieu du bouton par défaut.

J'ai déjà une classe CSS pour l'image, cela fonctionnera-t-il?

<asp:Button ID="..." CssClass=""/>

J'essaye maintenant, et l'image est tout froissée. C'est peut-être un problème CSS?

asp.netcssbutton
28
Blankman

Pourquoi ne pas utiliser un contrôle ImageButton ?

31
Tim S. Van Haren

Bien que vous puissiez "remplacer" un bouton par une image en utilisant le CSS suivant ...

.className {
   background: url(http://sstatic.net/so/img/logo.png) no-repeat 0 0;
   border: 0;
   height: 61px;
   width: 250px
}

... la meilleure chose à faire ici est d'utiliser un contrôle ImageButton car il vous permettra d'utiliser du texte alternatif (pour l'accessibilité).

4
Josh Stodola

En fait, je préfère utiliser l'élément de formulaire de bouton html et le faire runat = server. L'élément bouton peut contenir d'autres éléments à l'intérieur. Vous pouvez même ajouter une mise en forme à l'intérieur avec des span ou des strong. Voici un exemple:

<button id="BtnSave" runat="server"><img src="Images/save.png" />Save</button>
3
Banzor

Je ne sais pas si je comprends tout à fait quel est le problème. Vous pouvez ajouter une image dans le bouton ASP mais cela dépend de la façon dont sa configuration s’insère correctement. La mise en images de fond sur les boutons asp vous donne régulièrement un bouton en forme de douteux ou un image d'arrière-plan avec une superposition de texte car il manque une balise d'image, telle que l'image avec "SOUMETTRE LA REQUÊTE" par-dessus.

Pour le faire facilement, j'utilise un fichier "blankspace.gif" sur mon site Web. c'est un fichier gif vierge de 1 x 1 pixel et je le redimensionne pour remplacer une image sur le site Web.

comme je n'utilise pas CSS pour remplacer une image, j'utilise CSS Sprites pour réduire les requêtes. Mon site Web était à l'origine de 150 Ko pour la page d'accueil et avait environ 140 à 150 demandes de chargement de la page d'accueil. En créant un Sprite, j'ai éliminé les demandes, compressé la taille de l'image à une fraction de la taille et cela fonctionne parfaitement et toutes les zones dont vous avez besoin d'un fichier image pour le dimensionner correctement utilisent simplement la même image blankspace.gif.

<asp:ImageButton class="signup" ID="btn_newsletter" ImageUrl="~/xx/xx/blankspace.gif" Width="87px" Height="28px" runat="server" /

Si vous voyez ce qui précède, la classe charge l'image d'arrière-plan dans le CSS mais cela laisse le bouton avec le texte "soumettre la requête" dessus car il a besoin d'une image, donc le remplacer par une image préchargée signifie que vous vous êtes débarrassé de la demande et que vous avez encore l'image dans le css.

Terminé.

1
Chris

Vous pouvez ajouter une image au bouton asp.net. vous n'avez pas besoin d'utiliser uniquement le bouton d'image ou le bouton de lien. Lors de l'affichage du bouton sur le navigateur, il se convertit en bouton html par défaut. Vous pouvez donc utiliser ses propriétés "Style" pour ajouter une image. Mon exemple est ci-dessous. J'espère que ça marche pour vous.

Style="background-image:url('Image/1.png');"

Vous pouvez modifier l'emplacement de l'image en utilisant

background-repeat

propriétés. Vous pouvez donc écrire un bouton comme ci-dessous:

<asp:Button ID="btnLogin" runat="server" Text="Login" Style="background-image:url('Image/1.png'); background-repeat:no-repeat"/>
1
Mahmut EFE
.my_btn{ 
  font-family:Arial; 
  font-size:10pt; 
  font-weight:normal; 
  height:30px; 
  line-height:30px; 
  width:98px; 
  border:0px;
  background-image:url('../Images/menu_image.png'); 
  cursor:pointer;
}

<asp:Button ID="clickme" runat="server" Text="Click" CssClass="my_btn" />
0
user1758332

En supposant une classe Css "d'image":

input.image { 
  background: url(/i/bg.png) no-repeat top left; 
  width: /* img-width */; 
  height: /* img-height */ 
}

Si vous ne savez pas quelle est la largeur et la hauteur de l'image, vous pouvez la définir dynamiquement avec javascript.

0
Armstrongest