Ändern Radio-Buttons
    
WWW.WEB-TOOLBOX.NET
BEISPIEL  ZURÜCK  SITEMAP  

  Seiten-Hintergrundfarbe ändern mit Radio-Buttons

Mit einer Radio-Buttons-Auswahl wird die Hintergrundfarbe geändert. Eine weitere platzsparende Möglichkeit zur Auswahl / Änderung der Hintergrundfarbe.


   Einsatz

Wie bei den anderen Beispielen könnten sie dem Seitenbesucher die Wahl der Hintergrundfarbe überlassen, um z.B. in Abhängig von den Lichtverhältnissen der Umgebung zwischen Weiß oder einem hellen Grauton umzuschalten.

Farbwahl durch Auswahl einer Option:

Bei der Auswahl wird mit dem EventHandler 'onclick' die Funktion 'Farbe01' aufgerufen und der neue Wert für die Hintergrundfarbe übergeben.

Für eine Demo klicken sie die Radio-Buttons an.

       Rose
Grün
Violett
Blau
Gelb
Rot
Gras
default
Aliquam erat volutpat. Etiam tellus magna, ultrices quis, porttitor non, bibendum quis, lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  Arbeitsweise

Das Script zur Änderung der Hintergrundfarbe beinhaltet lediglich eine Funktion der beim Aufruf der neue Farbwert übergeben wird. Der Aufruf ist an den einzelnen Radiobuttons mit onClick notiert. 

<input onClick="Farbe01('#C4D3F6')" type="radio" name="Farbe">Blau
<input onClick="Farbe01('#FFE669')" type="radio" name="Farbe">gelb
Script im Head 
<script type="text/javascript" language="JavaScript">
<!-- Begin

function Farbe01(wahlfarbe)
{
document.bgColor=Wahlfarbe;
}

//  End -->
</script>


Formular im Body 

<form name="wahl">
<input onClick="Farbe02('#FFCEBF')" type="radio" name="Farbe">Rose<br>
<input onClick="Farbe02('#A3DFA5')" type="radio" name="Farbe">Grün<br>
<input onClick="Farbe02('#B3AAEC')" type="radio" name="Farbe">Violett<br>
<input onClick="Farbe02('#C4D3F6')" type="radio" name="Farbe">Blau<br>
<input onClick="Farbe02('#FFE669')" type="radio" name="Farbe">Gelb<br>
<input onClick="Farbe02('#F484B7')" type="radio" name="Farbe">Rot<br>
<input onClick="Farbe02('#7FC31C')" type="radio" name="Farbe">Gras<br>
<input onClick="Farbe02('#EFEFEF')" type="radio" name="Farbe">default<br>
</form>


Die JavaScript-Anweisung zur Änderung der Dokument-Hintergrundfarbe 'beißt sich' u.U. mit Notierungen für die Hintergrundfarbe in CSS-Anweisungen.







NACH OBEN