Buttons mit Bild erstellen

von: Werner Zenk

In Buttons lassen sich auch Bilder einbinden, wie einfach das geht zeigen die folgenden Beispiele.

Beispiel 1:

<button type="button"> <img src="birne.gif"> </button>

Beispiel 2:

<input type="button"
 style="background-color: transparent;
 background-image: url(birne.gif); background-repeat: no-repeat;
 width: 28px; height: 37px;">

Beispiel 3:

<input type="button"  style="background-color: transparent;
 background-image: url(birne.gif); background-repeat: no-repeat;
 width: 26px; height: 36px; border: solid 1px #000000;">

Siehe auch

Bild als HTML-Button

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Fredde: Und wohin führt der Button nun ? Wo kann man den Link eingeben wohin der Button einen führen soll ? Werner: Zum Beispiel mit etwas JavaScript: <button type="button"> <img src="birne.gif" onClick="location.href='seite.htm';"> </button> temp: gibt es eine Möglichkeit die Buttonbilder sich automatisch auf die Größe des Buttons scallieren zu lassen? Oder, dass das Bild genau in der Mitte des Buttons zu sehen ist? Werner: Mit CSS, zum Beispel text-align: center Im ersten Beispiel Breite und Höhe anpassen (width, height) .
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

Fehler in HTML - Fehler in HTML erkennen und validieren.

216 Standard-Farben - Das ist eine Aufstellung der „browsersicheren” Internet-Farben (Farbtabelle), die auf jedem System, mit jedem Browser gleich dargestellt werden und sich somit optimal fürs Webdesign eignen.

Farben und ihre Wirkung

Farbnamen, Hexadezimal, Dezimal, Prozent, Negativ und mit einem Farbbeispiel.

Grafik Einbinden - So werden Grafiken und Bilder richtig eingebunden (referenziert).

Image Maps - Verweis-sensitive Grafiken sind Grafiken, in denen der Anwender mit der Maus auf ein Detail klicken kann. Daraufhin wird ein Verweis ausgeführt.

Automatische Texteingabe - Automatische Texteingabe (autocomplete) in Formularfeldern verhindern oder erlauben.

Regenbogenfarben

Schriftattribute

Horizontale u. Vertikale Trennlinien

Meta-Angaben …mehr