Die CSS-Klasse eins TD ändern wenn im frame einen bestimten Inhalt geladen wird.

[messmar]

Hallo zusammen,

Ich habe drei Links und die sind in drei verschiedenen TD's eingebunden.

Der Content wird in einem iFrame geladen, was auch gut funktioniert.

Ich will aber dynamisch erreichen, dass die Hintergrundfarbe des TD's wo der Link
sich befindet ändert, wenn der Link aktiv ist u. im iFrame den entspreschenden Inhalt
geladen ist.

Ich habe die Links in einem Array gespeichert, und eine Abfrage erstellt mit
Document write-Funktion, die den TD erneut schreibt und zwar mit der richtigen
CSS-Klasse.

Es funktioniert aber leider nicht.

Kann jemand mir bitte helfen.

Vielen Dank und Gruß,

Amin

 

[Sven Mintel]

Hast du ausser den 3 Links noch mehr in der Seite?
Und wenn ja...ist deren Zielfenster auch das iFrame?

 

[messmar]

Hi,
danke zunächst.

Ich habe nur die drei Links auf die Seite.
Das Ziel ist immer das Iframe.

Gruß
Amin

 

[Quaese]

Hi,

hoffentlich habe ich dein Problem richtig verstanden.

Du willst die Tabellenzellen-Eigenschaften verändert lassen, solange der jeweils dazugehörige
Link im iFrame angezeigt wird.

Das folgende Script tauscht die CSS-Klasse der Zelle um den aktuell betätigten Link aus und
"merkt" ihn sich, bis ein anderer gedrückt wurde.

var arrClasses = new Array("normal","highlight");  // Link- und Hoverklasse angeben
var lnkOldID = "";

function activeLink(lnkID){
  // Objekt ermitteln
  myObj = document.getElementById(lnkID);
  // Fall bisher noch kein Link gewählt wurde
  if(lnkOldID == ""){
    lnkOldID = lnkID;                 // Akt. ID merken
    myObj.className = arrClasses[1];  // Markier-Farbe zuweisen
  }else{
    // Fall es nicht um den bereits aktiven Link handelt
    if(lnkOldID != lnkID){
      // Objekt ermitteln
      var myOldObj = document.getElementById(lnkOldID);
      myOldObj.className = arrClasses[0];    // Farbe des alten Links zurücksetzen
      myObj.className = arrClasses[1];       // Markier-Farbe des neuen Links setzen
      lnkOldID = lnkID;	                     // Akt. ID merken
    }
  }
}

Das Script setzt zwei CSS-Klassen voraus

• .normal
  Enthält die Formatierungen für die Tabellenzelle im Ausgangszustand
• .highlight
  Enthält die Formatierungen für die Tabellenzelle im hervorgehobenen Zustand

.normal{ background: #ffffff;}
.highlight{ background: #E2E9E9;}

Der zugehörige HTML-Bereich könnte wie folgt aussehen:

<table>
  <tr>
    <td id="td_1" class="normal"><a onclick="activeLink('td_1');" href="#">Link</a></td>
    <td id="td_2" class="normal"><a onclick="activeLink('td_2');" href="#">Link</a></td>
    <td id="td_3" class="normal"><a onclick="activeLink('td_3');" href="#">Link</a></td>
  </tr>
</table>

Ich hoffe, das hilft dir weiter.

Ciao
Quaese

 

[messmar]

Hi,

danke ;-)

Das hat geholfen.

Gruß,
Amin