Buttons mit Bild

von Horst Klier

Es gibt mehrere Möglichkeiten einen Formularknopf mit einer Grafik zu verschönern, beziehungsweise durch eine solche zu ersetzen. Doch dann können keine Werte (value) übergeben werden. Für CGI-Programme zur Auswertung umfangreicher Formulare ein Problem.

Die einfachste und bekannteste Methode ist:

 <input
type="image" src="grafik.gif">
    

      <button
name="knopf" type="button" value="wert"><img
src="grafik.gif">Knopf</button>
    

ist theoretisch genau, was wir brauchen. Leider denken die Browserhersteller anders. Der IE liefert statt “wert ” das komplette <img src=”grafik.gif”>, einen Knopf zurück, von Browserkompatibilität gar nicht zu reden. Schade.

Also behelfen wir uns selbst, indem wir eine Grafik und eine herkömmliche Schaltfläche miteinander kombinieren. Dank CSS ist das kein Problem. Vor der Bebilderung der Buttons wird mit geschützen Leerzeichen (&nbsp;) der Platz geschaffen. Das sieht dann, wie folgt, aus.

        <input style="font: bold 10pt arial, helvetica, sans-serif;
text-decoration: none; color: #000000; background-image:url(disk.gif); background-repeat:no-repeat;
background-position: 1px 1px;" type="submit" name="save"
value="&nbsp;&nbsp;&nbsp;&nbsp;Speichern">
 
      

        <input style="font: bold 10pt arial, helvetica, sans-serif;
text-decoration: none; color: #000000; background-image:url(trashcan.gif); background-repeat:no-repeat;
background-position: 1px 1px;" type="submit" name="del"
value="&nbsp;&nbsp;&nbsp;&nbsp;L&ouml;schen">
      

      <input style="font: bold 10pt arial, helvetica, sans-serif;
text-decoration: none; color: #000000; background-image:url(run.gif); background-repeat:no-repeat;
background-position: 1px 1px;" type="submit" name="run"
value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Run">
 

value

Weitere Beiträge:

• 5 Ideen wie Sie wiederkehrende Arbeitsschritte & Marketingprozesse gewinnbringend im Internet automatisieren! Ein Gastbeitrag von Robert Nabenhauer.
• Wachstum durch Facebook-Gewinnspiele: Wie Sie über Facebook virale Gewinnspiele & eine schnell wachsende Fangemeinde aufbauen
• Wie Sie aufmerksamkeitsstarke Prelaunch-, Launch- und Relaunch-Szenarien aufbauen und dabei Viralität, Spannung & Kaufkraft erzeugen
• Wie Sie waschechte Iphone-Apps mit PhoneGAP entwickeln, um am lukrativen App-Markt mitzumischen
• Wie Sie Ihr Shop-Sortiment so präsentieren, dass der Kunde in Zukunft mehr findet und eher kauft! Ein Gastbeitrag von Nicolas Schmidt-Voigt.
• 11 faszinierende BuddyPress-Plugins, um kostenlos aus WordPress ein soziales Netzwerk zu zaubern
• Die Vorboten einer neuen Internet-Industrie! Ein exklusiver Rückblick & Blick hinter die Kulissen der Clickbank-Exchange 2011 in New York.