Programmierung Javascript
Grafische Radiobuttons

DeveloperIT-ProjekteOffice-AnwendungenSoftware

Auch grafische Radiobuttons sind einfach realisierbar.

Buttons ___

Auch grafische Radiobuttons sind einfach realisierbar. Da bei Radiobuttons immer mehrere Buttons zu einer Gruppe zusammengesetzt werden, muss die Technik jedoch etwas erweitert werden. Wie oben auch benötigen Sie zunächst ein verstecktes Input-Feld für eine einzelne Gruppe von Buttons. Außerdem brauchen Sie natürlich für jeden Button ein Bild mit einem Link:




Text für Radiobutton 1



Text für Radiobutton 2



Text für Radiobutton 3

Da Sie nun mehrere Bilder haben, können diese natürlich nicht den gleichen Namen tragen. Um sie dennoch relativ leicht zugänglich zu machen, vergeben Sie am besten einen einheitlichen Namen, den auch das Input-Feld bekommt, und hängen diesem bei jedem Bild eine weitere Zahl an. Die Zahlen entsprechen dem Index des Radiobuttons in der Gruppe.Außerdem ist jeder Link mit der Funktion RadioButton verknüpft, die so aussehen könnte:

function RadioButtonfeld,index,maxindex)
{
document.form1[feld].value = index;
for(i=0;i{
if(index != i) {document.images [feld+”+i].src = ‘radio1.jpg’;}
else{document.images[feld+”+i].src= ‘radio2.jpg’;}
}}

Die Funktion erwartet drei Parameter: den allgemeinen Namen der Gruppe und gleichzeitig den Namen des Input-Feldes,weiterhin den Index des Buttons, auf den geklickt wurde, und letztlich die Anzahl der insgesamt vorhandenen Radiobuttons in der Gruppe.
Wird auf den ersten Radiobutton geklickt, bekommt die Funktion also dieWerte r1, 0, 3 übergeben. Die Funktion setzt dann als Erstes denWert des versteckten Input-Feldes auf den Index des markierten Buttons. Anschließend werden alle Bilder der Gruppe durchlaufen und gegebenenfalls entsprechend die Grafik ausgetauscht. Es ist dabei wichtig, dass alle Bilder vorhanden und durchnummeriert sind.

Autor: swasi
Anklicken um die Biografie des Autors zu lesen  Anklicken um die Biografie des Autors zu verbergen