Jojoxx.net logotyp

 

 

Användare ikonAnvändare
Besökare just nu: 22
Snabblänkar ikonSnabblänkar
JavaScript-arkivet
Perl
FAQ

Sök på Jojoxx.net


Grafiska radioknappar

Exempel

Kod


<form name="myForm">
<input type="hidden" name="myradio">
<a href="#" onClick="gfxRadioSelect('myRadios',document.myForm.myradio,0,'images/off.gif','images/on.gif'); return false;"><img src="images/off.gif" width=30 height=30 border=0 alt="" name="myRadios0"></a>
<a href="#" onClick="gfxRadioSelect('myRadios',document.myForm.myradio,1,'images/off.gif','images/on.gif'); return false;"><img src="images/off.gif" width=30 height=30 border=0 alt="" name="myRadios1"></a>
<a href="#" onClick="gfxRadioSelect('myRadios',document.myForm.myradio,2,'images/off.gif','images/on.gif'); return false;"><img src="images/off.gif" width=30 height=30 border=0 alt="" name="myRadios2"></a>
</form>
<script type="text/javascript">
/* Detta script finns att hämta på http://www.jojoxx.net och
   får användas fritt så länge som dessa rader står kvar. */

var myRadios=new Array('blå','gul','vit'); // Array med de värden som skall ingå i den grafiska radioknappsgruppen.

function gfxRadioSelect(radioarray,radioobj,index,offSrc,onSrc){
	for(var n=0;n<eval(radioarray+".length");n++){
		eval('document["'+radioarray+n+'"].src=offSrc;');
	}
	radioobj.value=eval(radioarray+"["+index+"]");
	eval('document["'+radioarray+index+'"].src=onSrc;');
}
</script>

Kommentar

Scriptet är ett exempel på hur du kan använda grafiska radioknappar på din sida. För varje grupp av radioknappar skapar du en array i början av scriptet med de värden som skall vara med i gruppen. I exemplet har arrayen namnet myRadios. Skapa sedan lika många bilder som det finns värden i arrayen och ge dem samma namn som arrayen plus ett indexnummer från 0 och uppåt (i exemplet myRadios0, myRadios1 och myRadios2). För varje grupp av grafiska radioknappar skapar du även ett gömt formulärs-fält för att kunna spara vald radioknapps värde i formuläret (i exemplet myradio). Varje bild är sedan innesluten i en länk som har ett onClick-event som anropar funktionen gfxRadioSelect(). Det första argumentet är en text-sträng med namnet på arrayen ("myRadios"). Det andra argumentet är objektnamnet för det gömda formulärsfältet där värdet skall lagras. Argument 3 är index-numret för den valda radio-knappen (första indexet är 0). Argument 4 och 5 är url till inaktiv bild resp. aktiv bild för den grafiska radio-knappen.

,