Über <form>-Tag anderen CSS in mehreren Frames auswählen

[hb]

N'abend. Ich bin so ein richtiger Vollblutanfänger und stoße überraschenderweise auf 'ne Menge Probleme. Folgendes Szenario: Meine Seite besteht aus einem Frameset mit 3 Frames (naja okay, eigentlich 3 Sets und 8+ Frames, aber das ist zu vernachlässigen...). Ich habe einen Bannerframe, einen Navigationsframe und einen für den Inhalt. Jetzt soll in die Navigation ein Auswahlmenü, damit ich die Farben und die Bilder (wegen der Kantenfüllung bei Transparenz) über mehrere Stysheets abändern kann. Ich habe mir da ansatzweise ein bißchen Quellcode zusammengeklaut, aber keinen Dunst davon. Sieht bisher so aus (in der Navi):

<form name="farbauswahl">
  <select>
    <option selected onclick="setActiveStyleSheet('grau'); return false;">grau</option>
    <option onclick="setActiveStyleSheet('weiss'); return false;">weiss</option>
    <option>blau</option>
  </select>
</form>

In der dazugehörigen .js-Datei steht Folgendes:

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;

Daraus resultiert, daß der neu ausgewählte Stylesheet nur für den Navigationsframe angewendet wird und ich nicht die leiseste Ahnung habe, wie das auf die anderen Frames übertragen werden kann und gleichzeitig das Bild im Bannerframe abgeändert wird.
Ist mein Vorhaben überhaupt möglich, oder zum Scheitern verurteilt?

Für jede Hilfe bin ich dankbar, seid meine Heilsbringer! :)

[Richard]

Hallo,

for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }

Eine for-Schleife ist so aufgebaut, dass als zweites ein LOGISCHER AUSDRUCK vorkommt, der entweder wahr oder falsch sein kann. In deinem Fall steht dort eine ZUWEISUNG.

for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

Hier genau das gleiche.

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;

Und wieder.

Daraus resultiert, daß der neu ausgewählte Stylesheet nur für den Navigationsframe angewendet wird und ich nicht die leiseste Ahnung habe, wie das auf die anderen Frames übertragen werden kann und gleichzeitig das Bild im Bannerframe abgeändert wird.

Wenn ich dich richtig verstehe, willst du aus einem Frame heraus einen anderen Frame (bzw. dessen Inhalt) ändern. Dazu gibts mehrere Möglichkeiten. Die einfachste ist, den Frames über das name-Attribut Namen zu geben. Dann schreibst du in den Verweis folgendes:

<a href="..." target="framename">

Ist mein Vorhaben überhaupt möglich, oder zum Scheitern verurteilt?

Eigentlich ist es möglich. Wenn du aber NUR die Hintergrundfarbe eines Frames ändern möchtest, gibt es noch wesentlich einfachere und kürzere Methoden, z. B.:

<select name="wahl">
<option>blau</option>
<option>rot</option>
</select>
<button onClick="faerben()">OK</button>

Javascript:

  
function faerben() {  
switch(wahl.value)  
  case "blau":  
    framename.backgroundColor = "#0000FF";  
  case "rot":  
    framename.backgroundColor = "#FF0000";  
}  

Viele Grüße

[Der Martin]

Moin Richard,

for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {

Eine for-Schleife ist so aufgebaut, dass als zweites ein LOGISCHER AUSDRUCK vorkommt, der entweder wahr oder falsch sein kann. In deinem Fall steht dort eine ZUWEISUNG.

Ja, und?
Eine Zuweisung liefert als Ergebnis den neuen Wert, der der Variablen zugewiesen wurde. Die for-Schleife wiederum läuft solange, wie der zweite Ausdruck in for() einen Wert ungleich 0 bzw. null ergibt. In diesem Fall läuft die for-Schleife also, solange
  document.getElementsByTagName("link")[i])
existiert (nicht null ist). Diese Art, eine Abbruchbedingung zu formulieren, mag ungewöhnlich sein, aber sie ist perfekt in Ordnung.

for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
Hier genau das gleiche.

Genau. Und weiter unten nochmal.

Schönen Tag noch,
 Martin

[Richard]

Hallo,

Ja, und?
Eine Zuweisung liefert als Ergebnis den neuen Wert, der der Variablen zugewiesen wurde.

Das wusste ich nicht.

Viele Grüße