DerAsmo: Einfärbung von Textteilen

Beitrag lesen

SELF-Forum

Einfärbung von Textteilen

DerAsmo
– Informationen zu den Bewertungsregeln

Hallo,
ich habe mich heute mit der Einfärbung von Textpassagen bei einem Event beschäftigt. Genauer soll über Checkboxen (oder eventuell Radiobuttons) eine Auswahl getroffen werden, nach der bestimmte Textstellen dann eingefärbt werden sollen.

Ich werde kurz den größeren Rahmen erläutern, um Fragen im Vornherein zu beseitigen. Es wird eine XML-Datei in eine HTML-Datei überführt, diese soll XHTML-Konform sein. In der XML-Datei werden bestimmt Wörter oder Wortgruppen ausgezeichnet, zB alle Substantive oder meinetwegen alle Nahrungsmittel. In der HTML soll dann durch Auswahl der Gruppe, diese kenntlich gemacht werden.

Ich habe jetzt zum Testen ein kleines Beispiel zusammengeschußtert, dass auf den ersten Blick garnicht so schlecht aussah.

<html>  
 <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>Checkboxtest</title>  
  
<script type="text/javascript">  
  function MachFarbig() {  
    if (document.Auswahl.Farbe[0].checked == true) { document.all.RedText.style.backgroundColor = "red"; }  
    else { document.all.RedText.style.backgroundColor = "white"; }  
    if (document.Auswahl.Farbe[1].checked == true) { document.all.GreenText.style.backgroundColor = "green"; }  
    else { document.all.GreenText.style.backgroundColor = "white"; }  
    if (document.Auswahl.Farbe[2].checked == true) { document.all.BlueText.style.backgroundColor = "blue"; }  
    else { document.all.BlueText.style.backgroundColor = "white"; }  
}  
</script>  
  
 </head>  
 <body>  
  
    <form name="Auswahl">  
        <p>  
        <input type="radio" onclick="MachFarbig()" name="Farbe" value="red"> Rot  
        <input type="radio" onclick="MachFarbig()" name="Farbe" value="green"> Gruen  
        <input type="radio" onclick="MachFarbig()" name="Farbe" value="blue"> Blau  
      </p>  
    </form>  
  
    <div style="width:70%;">  
      <strong>Text.</strong>  
      <p style="text-align:justify; text-size:11pt; margin-top:5px">  
        Hier steht ein langer Text. Bei Auswahl der Checkboxen soll an verschiedenen Textstellen die Hintergrundfarbe gewechselt werden, wenn die entsprechende Box gesetzt ist. Das Wort <span id="RedText">Rot</span> soll immer einen roten Hintergrund haben, <span id="GreenText">Gruen</span> soll einen gruenen Hintergrund bekommen und <span id="BlueText">Blau</span> entsprechend einen blauen Hintergrund.  
      </p>  
    </div>  
 </body>  
</html>

Das funktioniert schonmal, sobald ich aber ein weiteres span einfüge (ich möchte ja mehrere Wörter markiert haben), mit der ID "RedText" zB, dann wird garkeine der Farben mehr gesetzt.

Wenn das schonmal klappen würde, wäre ich glücklich.
Aber vielleicht wäre es noch schön, sich manchmal mehrere Gruppen anzeigen zu lassen, also das Ganze über Checkboxen zu machen. Dann wäre es aber Möglich, dass Wörter zu verschiedenen Gruppen gehören. Ist es möglich diese Fälle abzufangen und die Farben dann zu mischen? Wie gesagt, das ist nur eine Überlegung am Rande und kann ignoriert werden falls es keine spontane Lösung gibt.

Ich freue mich über Antwort, DerAsmo.

Beitrag melden
–
Informationen zu den Bewertungsregeln