Wie man Bilder Anstelle von Radiobuttons Verwenden
In diesem Artikel erfahren Sie, wie Sie Bilder anstelle von Radiobuttons einen Custom-Look für Ihre Formulare zur Verfügung zu stellen.
Jedes Optionsfeld Formularfeld ist mit einer Display in einen span-Tag setzt: keine Eigenschaft, damit es nicht im Browser angezeigt wird. Aber es ist immer noch sehr viel ein Teil des Formulars.
Neben das Optionsfeld Formularfeld, eines von zwei Bildern angezeigt wird, entweder ein Bild ein getestetes Optionsfeld darstellen, und ein Bild mit einem ungeprüften Optionsfeld darstellt.
Jedes Optionsfeld des Satzes wird das Bild auf das nicht markiert Bild umgeschaltet und das Optionsfeld ist nicht markiert. (A Optionsfeld ist Alle Optionsfelder mit den gleichen Form Feldnamen.)
Der Radioknopf geklickt wurde geprüft, und das Bild wird auf dem geprüften Bild geschaltet.
Auf diese Weise werden die Radio-Buttons in dem richtigen aktiviert / deaktiviert Zustand sein, wenn das Formular abgeschickt wird.
How To Make It Work
Diese Anweisungen annehmen, dass Sie bereits ein Formular mit Radio-Buttons haben. Wenn das nicht der Fall ist, jetzt einen erstellen. Dann fahren Sie mit dieser Anleitung.
Die Radio-Bilder
Erhalten oder zwei Bilder erstellen. Eines der Bilder stellt ein getestetes Optionsfeld und ein repräsentiert ein ungeprüftes Optionsfeld. Beiden Bilder sollen die gleiche Breite und Höhe sein, ein Ruckeln oder Schütteln der Web-Seite Inhalte zu verhindern, wenn das Bild von einem zum anderen umgeschaltet wird.
Gerne können Sie die Bilder in diesem Artikel das Beispiel verwendet, verwenden.
Laden Sie die Bilder auf Ihrem Server und notieren ihre URLs.
Der Formular-Tag muss eine ID hat. Beispiel:
Gehen Sie wie folgt für jedes Optionsfeld in der Form, die mit einem Bild dargestellt werden. Es gibt zwei Schritte für jedes Optionsfeld.
Radio-Button, Schritt 1 -
Geben Sie das Optionsfeld Formularfeld ein id-Attribut, wenn es nicht bereits eine hat. Hier ist ein Beispiel.
Das oben Optionsfeld ID-Wert des Formularfeldes ist RadioFieldID1. Im vollständigen Code für das Arbeitsbeispiel (weiter unten), werden Sie die anderen beiden Radiobuttons id Werte sind RadioFieldID2 und RadioFieldID3 sehen.
Hinweis: Alle ID-Werte auf einer Webseite muss eindeutig sein. Duplikate können Browser verwirren.
Anmerkung 2: Ein ID-Wert mit einem alphabetischen Buchstaben beginnt und nur aus Buchstaben und Zahlen besteht.
Nun, da das Optionsfeld Formularfeld eine ID hat, wickeln Sie es in einem span-Tag mit Stil display: none. Das wird ihre Anzeige aus dem Browserfenster entfernen, aber es immer noch Teil der Form halten. Beispiel:
Radio-Button, Schritt 2 -
Unmittelbar Formularfeld nach dem Optionsfeld, das von der Anzeige mit einem Span-Tag entfernt wurde, stellte die folgenden Bildtag (siehe unten für Anpassungen):
Hier ist eine Liste der Attribute oben img (Bild)-Tag, mit der Anpassung verwendeten Hinweise in.
Arbeitsbeispiel (weiter unten) drei Radioknöpfe. Die mittlere ist vorgeprüft. Siehe den Arbeits Beispiel-Quellcode unter dem Beispiel dargestellt.
Geben Sie die Breite des Optionsfelds repräsentativen Bildes.
Geben Sie die Höhe des Optionsfelds repräsentativen Bildes.
Die RadioClicked () erfordert drei Parameter.
Der erste Parameter ist die ID des Optionsfeld Formularfeldes, das das Bild darstellt.
Der zweite Parameter ist das Formularfeld Name Optionsfeld.
Der dritte Parameter ist die ID des Formulars (der Wert der ID in der Form-Tag).
Mit diesen Informationen funktionieren RadioClicked () kann Optionsfeld Formularfeld Zustände nach Bedarf ändern und die richtige repräsentative Bild angezeigt werden soll.
Der Stil enthält die cursor: pointer Eigenschaft. Es macht die Cursor Änderung das gleiche wie wenn sie einen Link schweben über.
Das ursprüngliche Optionsfeld Formularfeld wird nicht mehr angezeigt. Das repräsentative Bild wird stattdessen angezeigt.
Hat die beide oben genannten Schritte für jedes Optionsfeld in der Form, die durch ein Bild dargestellt wird.
Ein Arbeitsbeispiel
Hier ist ein funktionierendes Beispiel dafür, wie es funktioniert.
Und hier ist der Quellcode des obigen Ausführungsbeispiels.
Mit dem Code in diesem Tutorial Artikel vorgestellt, können Sie ein repräsentatives Bild für alle und alle Optionsfelder eines Formulars verwenden.
War dieser Artikel hilfreich für Sie?
Alle Informationen in WillMaster Bibliothek Artikel präsentiert AS-IS.
Wir schlagen vor, nur und empfehlen, was wir glauben, dass der Wert ist. Als Vergütung für die Zeit und die Qualität der Forschung Links bieten beteiligt, verwenden wir in der Regel Affiliate-Links, wenn wir können. Jedes Mal, wenn wir etwas nicht unsere eigenen verknüpfen, sollten Sie annehmen, dass sie Affiliate-Links sind oder dass wir in irgendeiner Weise profitieren.