Schaltflächenbild senden

Lesezeit: 3 Minuten

Harsha MV

Ich möchte anstelle des Standard-Buttons ein Submit-Button-Bild verwenden. Ich habe bei Google und SO gesucht und ein paar verschiedene Möglichkeiten gefunden.

Welches ist der richtige Weg, ein Bild als Submit-Button zu verwenden?

Außerdem möchte ich drei Zustände für die Schaltfläche hinzufügen – normal, Hover, Onclick

Was ich versucht habe

HTML

<input type="submit" value="Subscribe">

CSS

input[type=submit] {
    background:url(../images/btn-subscribe.gif) none;
    text-indent:-9999px;
    width:109px;
    height:41px;
}

Was sich zeigt

Was es anzeigen soll

Entweder entfernen text-indent und hinzufügen value="Subscribe" in <input> oder füge die Buchstaben hinzu Subscribe auf dem Bild

– asprit

2. August 2012 um 6:56 Uhr
@Harsha MV: Siehe meine Antwort unten.

– Ahsan Khurshid

2. August 2012 um 7:06 Uhr

Ahsan Khurshid

Bearbeitet:

Ich denke, Sie versuchen, das zu tun, was hier getan wurde DEMO

Es gibt drei Zustände einer Schaltfläche: normal, Hover und aktiv

Sie müssen verwenden CSS-Bild-Sprites für die Schaltflächenzustände.

Siehe Das Geheimnis von CSS-Sprites

/*CSS*/

.imgClass { 
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position:  0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{ 
  background-position:  0px -52px;
}

.imgClass:active{
  background-position:  0px -104px;
}

<!-- HTML -->
<input type="submit" value="" class="imgClass" />

mit sprites halte ich mich generell fern background Kurzschrift, um Wiederholungen zu minimieren. Verwenden background-image an .imgClass und background-position für die anderen Staaten

– Zach Lysobey

17. Januar 2013 um 16:24 Uhr
@Zach L: Bearbeitet, danke für den Vorschlag.

– Ahsan Khurshid

21. Januar 2013 um 10:10 Uhr
Zur Optimierung der Benutzeroberfläche füge ich immer die CSS-Regel hinzu cursor: pointer;. Es ändert den Cursor beim Hover in das Handsymbol, genau wie Links dies standardmäßig tun.

– Justus Romijn

20. März 2013 um 16:16 Uhr
WARNUNG, einige Browser (Chrome) erzwingen einige Stile beim Senden. Dieses Problem tritt auf, wenn Sie transparentes PNG als Übermittlungshintergrund verwenden – der gesamte Hintergrund hat color = „buttonface“ und ist nicht 100 % transparent. Hintergrundfarbe hinzufügen: transparent.

– Piotr Müller

21. Mai 2013 um 11:46 Uhr
Der Link zum verwendeten Bild ist defekt.

– Brian McCutchon

6. September 2016 um 3:47 Uhr

Aspirin

<input type="image" src="https://stackoverflow.com/questions/11772326/path%20to%20image" name="submit" />

AKTUALISIEREN:

Für Schaltflächenzustände können Sie type=”submit” verwenden und dann eine Klasse hinzufügen

<input type="submit" name="submit" class="states" />

Verwenden Sie dann in CSS Hintergrundbilder für:

.states{
background-image:url(path to url);
height:...;
width:...;
}

.states:hover{
background-position:...;
}

.states:active{
background-position:...;
}

fügt den Namen hinzu = senden Sie den Schlüssel?

– Harsha MV

2. August 2012 um 6:46 Uhr
Was ist, wenn ich Schaltflächenzustände hinzufügen möchte?

– Harsha MV

2. August 2012 um 6:48 Uhr
@HarshaMV Was lbu gesagt hat. name kann verwendet werden, um auf Schaltflächenklicks zu prüfen. Zum Beispiel: In php if(isset($_POST['name']))

– asprit

2. August 2012 um 6:48 Uhr
habe meine Frage aktualisiert. Das ist, was ich bekomme, wenn ich versuche, ein BG-Bild hinzuzufügen

– Harsha MV

2. August 2012 um 6:54 Uhr
@HarshaMV Hat unter deiner Frage einen Kommentar hinterlassen

– asprit

2. August 2012 um 6:56 Uhr

Ibnu

<INPUT TYPE="image" SRC="https://stackoverflow.com/questions/11772326/images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">

Wo die Standard-Submit-Schaltfläche hat TYPE="submit"wir haben nun TYPE="image". Der Bildtyp ist standardmäßig eine Schaltfläche zum Senden eines Formulars. Einfacher

Paul Wilga

Aus Gründen der Barrierefreiheit ist es sehr wichtig, dass Sie immer den Wert der Übermittlung angeben, auch wenn Sie diesen Text ausblenden oder verwenden <input type="image" .../> immer angeben alt="" Attribut für dieses Eingabefeld.

Blinde Menschen wissen nicht, was ein Knopf tut, wenn er nichts Bedeutungsvolles enthält alt="" oder value="".

phndiaye

Sie müssen die Ränder entfernen und der Eingabe ein Hintergrundbild hinzufügen.

.imgClass { 
    background-image: url(path to image) no-repeat;
    width: 186px;
    height: 53px;
    border: none;
}

Normalerweise sollte es jetzt gut sein.

10177500cookie-checkSchaltflächenbild senden

#CSS #einreichen #html