Service Tipps HTML CSS JavaScript PHP MySQL Webdesign Linkliste SiteMap

Bild als HTML-Button, Bild als Submit-Button, und um eine JavaScript-Funktion zu starten.

• Bild als HTML-Button:

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

 

• Bild als HTML-Button: (Beispiel 2)

OK

<button type="button"> <img src="ok.gif"> OK </button>

 

• Bild als HTML-Button: (Beispiel 3)

OK

<button type="button"> <img src="ok.gif"> <span style="color: #ff0000">OK</span> </button>

 

• Bild als HTML-Button: (Beispiel 4)
Ein normaler input-Button, die Formatierung wird hier mit CSS gemacht.

<input type="button"
 style="background-image: url(bild.gif); background-repeat: no-repeat;
 background-position: center; width: 50px; height: 50px;">

 

• Bild als Submit-Button, um ein Formular zu versenden:

<input type="image" name="absenden" src="bild.gif">

In PHP wird der Name des Bildes dann als $_POST["absenden_x"] und
$_POST["absenden_y"] übermittelt. Diese enthalten dann die XY-Koordinaten der
Stelle worauf im Bild geklickt wurde.

 

• JavaScript-Funktion starten:
Beim anklicken des Bildes wird eine JavaScript-Funktion ausgeführt.

<img src="bild.gif" onClick="alert('Hallo Welt');">

 Das könnte Sie interessieren:
HTML 5 - Die neuen Input-Elemente. Werfen Sie einen Blick auf die neuen Eingabefelder in HTML5.  Bildschutz (5)  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.  Kommentare - Ein HTML- oder JavaScript-Quelltext, der zum Beispiel mit Leerzeilen und Einrückungen übersichtlich aufgebaut ist und an entscheidenden Stellen Umbrüche und Kommentare aufweist, ist deutlich leichter zu pflegen.  Regenbogenfarben  Einen Link zum Seitenanfang setzen - Ist die Webseite etwas lang geworden, kann man einen Link zum Seitenanfang setzen.  Frameset Vorlagen (4)  Beispiele für Farbkombinationen  …mehr