Vordergrund aus- und einschalten

Auf der Seite folgenden Code ganz am Anfang einbinden:<div id="ausblender"> <img name="ein_aus" title="zum Aus- und Einschalten des Vordergrunds" src="files/laden_im_thal/grafiken/baum_klein.jpg" alt="" onclick="verblassen('wrapper', 2000);">
<script type="text/javascript"> document.getElementById("wrapper").style.opacity = "0"; document.getElementById("wrapper").style.filter = "alpha(opacity = 0)"; setTimeout ("einblenden();", 2000);
function einblenden() { verblassen("wrapper", 2000); }
</script> </div>
Das <div id="wrapper"> ist dann das erste Tag, das nach <body> kommen muss.

Der Code für das aus- und einblenden ist wie folgt:

//Idee: http://tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation
//var TimeToFade = 2000.0;

function animateFade(lastTick, eid, dauer)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
  
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/dauer;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  element.style.opacity = newOpVal;
  element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
  
    setTimeout(function(){animateFade(curTick,eid,dauer)}, 33);
}


function verblassen(eid, dauer)
{

  var element = document.getElementById(eid);
 
   if(element.FadeState == 2)
      document.images.ein_aus.src = "files/laden_im_thal/bilder/baum_klein_hover.jpg";
  else
      document.images.ein_aus.src = "files/laden_im_thal/bilder/baum_klein.jpg";

  if(element.FadeState == null)
  {
    if(element.style.opacity == null || element.style.opacity == '' 
       || element.style.opacity == '1') 
      element.FadeState = 2;
    else 
      element.FadeState = -2;
  }
    
  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = dauer - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = dauer;
    setTimeout(animateFade(new Date().getTime(),eid, dauer), 33);
  } 
}


$(document).ready(function(){
    $("#fadeButton").click(function(){
        fade('fadeBlock');
    });
});