Enrico: Grafik über css und JavaScript flackern lassen

Beitrag lesen

Hallo,

ich versuche, den Schriftzug unseres Logos über JavaScript flackern zu lassen.

Hierzu habe ich unser Logo mehrfach abgeändert und in einer einzigen Grafik als Sprite zusammengefasst:

  • Original
  • Helligkeit + 10
  • Helligkeit + 20
  • Helligkeit + 30
  • Helligkeit + 40
  • Helligkeit + 50
  • Helligkeit - 10
  • Helligkeit - 20
  • Helligkeit - 30
  • Helligkeit - 40
  • Helligkeit - 50

In der zugehörigen css-Datei habe ich für jeden Zustand eine eigene Klasse definiert. Klassen deshalb, weil ich über document.getElementById("Logo") auf den div mit der Logografik zugreife. Den eigentlichen Flacker-Effekt möchte ich nun durch Zuweisung einer zufällig ermittelten Klasse, die einen anderen Ausschnitt des Sprites und damit die Grafik in aufgehellter oder abgedunkelter Version ausgibt. Gleich darauf wird aber wieder der Ausschnitt mit der originalen Grafik angezeigt und die Funktion nach einer zufälligen zeitlichen Verzögerung wieder aufgerufen.

----  
HTML  
----  
  
<div id="Logo" class="LL0"></div>
---  
CSS  
---  
  
.LL0,  
.LL1,  
.LL2,  
.LL3,  
.LL4,  
.LL5,  
.LL6,  
.LL7,  
.LL8,  
.LL9,  
.LL10  
{  
   background: url(../IMG/LayoutLogo.png);  
   height:     222px;  
   width:      346px;  
}  
  
.LL0  
{  
   background-position: 0 0;  
}  
  
.LL1  
{  
   background-position: 0 -222px;  
}  
  
.LL2  
{  
   background-position: 0 -444px;  
}  
  
...usw...
----------  
JAVASCRIPT  
----------  
  
var Logo;  
  
window.onload = function ()  
{  
   Logo = document.getElementById("Logo");  
  
   AnimationLogo();  
}  
  
function AnimationLogo()  
{  
   Logo.className = "LL" + rand (1, 10);  
   Logo.className = "LL0";  
  
   setTimeout("AnimationLogo()", rand (3000, 10000));  
}  
  
function rand (min, max)  
{  
   return Math.floor (Math.random() * (max - min + 1)) + min;  
}

Leider wird mir aber immer nur die Grafik in der Version "LL0", also dem originalen Zustand angezeigt, nicht aber in einer zufällig anderen Aufhellung bzw. Abdunkelung.

Wo liegt mein Denk- oder/und Umsetzungsfehler bei meinem Vorhaben?

Vielen Dank für eure Hilfe und Gruss,
Enrico