Opacity bei verschachtelten div's und IE

[Oscar Carls]

Moin Leudde,

folgendes Problem habe ich:

Ich kann die Opacity von einem <div> auf "root"-Ebene im IE verändern, sobald ich aber ein unterelement versuche zu verändern, macht das nix mehr, während z.B. visibility = 'hidden' dieses Unterelements problemlos funktioniert:

Hier mal die Definition:

<div id="Q1">
  <div id="Q1Button1"><a href="#" onClick="javascript:Button(1,1); return false;">Button 1</a></div>
  <div id="Q1Button2"><a href="#" onClick="javascript:Button(1,2); return false;">Button 2</a></div>
</div>

Die Javascript-Schnipsel dazu sehen wie folgt aus:

function Button(q, b) {
   eval("b1 = 'Q" + q + "Button1'");  eval("b2 = 'Q" + q + "Button2'");

if (b == 1) { opacitylayer(b1, 1); opacitylayer(b2, 0.3); }
          else { opacitylayer(b1, 0.3); opacitylayer(b2, 1); }

// ...
}

In einer separaten Bibliothek sind folgende Routinen definiert:

function opacitylayer(a, o) {
    var x = new getObj(a);
    if (x.style) {
      x.style.opacity = o;
      x.style.MozOpacity = o;
      x.style.filter = "Alpha(opacity=" + eval(o * 100) + ")";
    }
  }

Die Funktion getObj ist eine standard-routine um das Element abhängig von dem Browser zu bekommen, und die funktioniert auch.

Rufe ich

opacitylayer('Q1', 0.3)

auf, so klappt es in allen Browsern, rufe ich

opacitylayer('Q1Button1', 0.3)

auf, so geht es bei FF und Safari, nicht aber beim IE, die Opacity verändert sich nicht.

Mache ich zum Test in der Routine aber ein

s.style.visibility = 'hidden'

So verschwindet auch das Element aus dem verschachtelten <div> (sprich mein Button)...

So....irgendwie tappe ich da im dunkeln und habe keine Ahnung, wo das Problem liegt...Irgendwelche Ideen, Tipps oder Work-a-rounds?

Danke, Carsten

[Struppi]

Ich kann die Opacity von einem <div> auf "root"-Ebene im IE verändern, sobald ich aber ein unterelement versuche zu verändern, macht das nix mehr,

was heißt "macht das nix mehr?"

Aber in deinem Code sind ein paar unsauberkeiten

<div id="Q1Button2"><a href="#" onClick="javascript:Button(1,2); return false;">Button 2</a></div>

Das Label 'javascript:' ist hier unnötig. Wozu überhaupt der Link?

function Button(q, b) {
   eval("b1 = 'Q" + q + "Button1'");  eval("b2 = 'Q" + q + "Button2'");

Wozu eval()?
Einen String kannst du auch ohne zusätziches eval verknüpfen oder erwartest du Javascript Code im q oder b?

x.style.filter = "Alpha(opacity=" + eval(o * 100) + ")";

Auch das eval ist überflüssig.

Struppi.