<!-- Variable zum Speichern des Bildes -->
var bild_fg;
var actim = 0;
    
<!-- Die folgenden Variablen beschreiben die Anzahl der Schritte für das darzustellende Bild -->
<!-- die Zeit in ms, die zwischen jeder Änderung des clip-Rechtecks liegt                    -->
var schritte = 60;
var opac     = 1.00/schritte;
var G_opac   = 0.00;
var zeit     = 0;
var num      = 0;
var G_textobj1;
var G_texobj2;
var G_first_time = true;


function display_image( img_src )
{   <!-- Diese Variablen beschreiben die Eckpunkte des clip-Rechtecks -->
    var oben    = 0;
    var rechts  = 0;
    var unten   = 0;
    var links   = 0;

    <!-- Diese Variablen beschreiben die Inkrementierungen und Dekrementierungen des clip-Rechtecks -->
    var step_oben   = 0;
    var step_rechts = 0;
    var step_unten  = 0;
    var step_links  = 0;

    <!-- Auf die beiden Textelemente infotext1 und infotext2 zugreifen -->
    G_texobj1 = document.getElementById( "textinfo1" );
    G_texobj2 = document.getElementById( "textinfo2" );

    <!-- Lade das aktuelle Bild in das Hintergrundbild b2 -->
    document.images["b2"].src = document.images["b1"].src;

    <!-- Lade den aktuellen Text aus textinfo1 in textinfo2 -->
    G_texobj2.innerHTML = G_texobj1.innerHTML;

     <!-- Setze die Transparenz von textinfo2 auf 1.00 -->
    G_texobj2.style.opacity = 1.00;
    G_texobj2.style.filter  = "alpha( opacity=100);"

    <!-- Setze die Transparenz von textinfo1 auf 0.00 -->
    G_texobj1.style.opacity = 0.00;
    G_texobj1.style.filter  = "alpha( opacity=0)";

    <!-- Auch für die kleinen Bilder die Transparenz setzen, aber nur beim Laden der Seite -->
    if ( G_first_time == true )
    {   document.images["smallpics"].style.opacity = 0.00;
        document.images["smallpics"].style.filter  = "alpha( opacity=0 )";
    }

    <!-- Setzen des neuen Textes in textinfo1 -->
    G_texobj1.innerHTML = texte[ G_act_image ];

    <!-- Zugriff auf das Vordergrundbild -->
    bild_fg = document.getElementById("bild1");

    <!-- Das neue Bild kommt in das Vordergrundbild b1, aber vorher muss das clip-Rechteck umgesetzt werden. -->
    <!-- bild_fg.style.clip = "rect(0px 0px 0px 0px)";-->

    document.images["b1"].style.clip = "rect(0px 0px 0px 0px)";
    document.images["b1"].src = bild[img_src];
    G_opac = 0.00;
    document.images["b1"].style.opacity = G_opac;
    document.images["b1"].style.filter  = "alpha( opacity=" + parseInt(100*G_opac) + ")";

    <!-- Auf das Bild zugreifen -->
    var bildObj = document.getElementById("b1");

    <!-- Initialisierung von oben, links, rechts und unten -->
    rechts = bildObj.width;
    unten  = bildObj.height;

    oben   = 0;
    links  = 0;
    num    = 0;

    <!-- Berechnung der Pixelanzahl, die in jedem Schritt vergoessert wird -->
    calc_steps( rechts, unten );

    <!-- Bild einblenden, texobj2 ausblenden und texobj1 einblenden -->
    bereichVeraendern();

}

<!-- Funktion zur Anzeige des beschreibenden Texts -->
function display_text( index )
{   var textObj = document.getElementById( "bildtitel" );
    textObj.innerHTML = titel[index];

    G_act_image = index;

    if ( G_info_visible )
    {   adjust_trans( );
    }
    display_info( 0, index );
}

function display_info( art, index )
{   if ( art == 0 )
    {   var infoObj = document.getElementById( "textinfo1" );
        infoObj.innerHTML = texte[index];
    }
    else
    if ( art == 1 )
    {   var infoObj = document.getElementById( "textinfo1" );
        infoObj.innerHTML = "";
    }
}

<!-- Funktion zur Berechnung, wie sich das clip-Rechteck in jedem Schritt verändert -->
function calc_steps( width, hoehe )
{   <!-- Die Art und Weise, wie sich das Rechteck verändert ist abhängig vom Parameter art -->
    var art = Math.round(Math.random()*7);
    if ( G_first_time == true )
    {   art = 0;
    }
    if ( art == 0 )
    {   <!-- Kinovorhang links und rechts verändern sich -->
        oben   = 0;
        unten  = hoehe;
        links  = Math.round( width / 2 );
        rechts = Math.round( width / 2 );
        step_oben   = 0;
        step_rechts = Math.round( width / schritte / 2 );
        step_unten  = 0;
        step_links  = -Math.round( width / schritte / 2 );
    }
    else
    if ( art == 1 )
    {   <!-- Kinovorhang oben und unten verändern sich -->
        oben   = Math.round( hoehe / 2 );
        unten  = Math.round( hoehe / 2 );
        links  = 0;
        rechts = width;

        step_oben   = -( hoehe / schritte / 2 );
        step_unten  = ( hoehe / schritte / 2 );
        step_rechts = 0;
        step_links  = 0;
    }
    else
    if ( art == 2 )
    {   <!-- Rechteck aus der Mitte heraus -->
        oben   = Math.round( hoehe / 2 );
        unten  = Math.round( hoehe / 2 );
        links  = Math.round( width / 2 );
        rechts = Math.round( width / 2 );
       
        step_oben   = -( hoehe / schritte / 2 );
        step_unten  = ( hoehe / schritte / 2 );
        step_rechts = ( width / schritte / 2 );
        step_links  = -( width / schritte / 2 ); 
    }
    else
    if ( art == 3 )
    {   <!-- von links nach rechts -->
	oben   = 0;
        unten  = hoehe;
        links  = 0;
        rechts = 0;

        step_oben   = 0;
        step_unten  = 0;
        step_links  = 0;
        step_rechts = ( width / schritte );
    }
    else
    if ( art == 4 )
    {   <!-- von rechts nach links -->
	oben   = 0;
        unten  = hoehe;
        links  = width;
        rechts = width;

        step_oben   = 0;
        step_unten  = 0;
        step_links  = -( width / schritte );
        step_rechts = 0;
    }
    else
    if ( art == 5 )
    {   <!-- von oben nach unten -->
	oben   = 0;
        unten  = 0;
        links  = 0;
        rechts = width;

        step_oben   = 0;
        step_unten  = ( hoehe / schritte );
        step_links  = 0;
        step_rechts = 0;
    }
    else
    if ( art == 6 )
    {   <!-- von unten nach oben -->
	oben   = hoehe;
        unten  = hoehe;
        links  = 0;
        rechts = width;

        step_oben   = -( hoehe / schritte );
        step_unten  = 0;
        step_links  = 0;
        step_rechts = 0;
    }
    else
    if ( art == 7 )
    {   <!-- Bestimme beliebigen Punkt mittels Math.random und ziehe von dort das Rechteck auf -->
	var px = Math.round( Math.random()*width );
        var py = Math.round( Math.random()*hoehe );
	oben   = py;
        unten  = py;
        links  = px;
        rechts = px;

        step_oben   = -( py / schritte );
        step_unten  = ( (hoehe-py) / schritte );
        step_links  = -( px / schritte );
        step_rechts = ( (width-px) / schritte );
    }
}

function bereichVeraendern()
{   <!-- Verändern der Parameter oben, rechts, unten und links, die das Clip-Rechteck beschreiben -->
    oben   += Math.round( step_oben );
    rechts += Math.round( step_rechts );
    unten  += Math.round( step_unten );
    links  += Math.round( step_links );

    G_opac = G_opac + opac;
    document.images["b1"].style.opacity = G_opac;
    document.images["b1"].style.filter  = "alpha( opacity=" + parseInt(100*G_opac) + ")";
    document.images["b1"].style.clip = "rect(" + oben + "px " + rechts + "px " + unten + "px " + links +"px)";

    G_texobj1.style.opacity = G_opac;
    G_texobj2.style.opacity = 1 - G_opac;
    G_texobj1.style.filter  = "alpha( opacity=" + parseInt(100*G_opac) + ")";
    G_texobj2.style.filter  = "alpha( opacity=" + parseInt(100 - 100*G_opac) + ")";

    <!-- für die kleinen Bilder nur beim Laden der Seite -->
    if ( G_first_time == true )
    {   document.images["smallpics"].style.opacity = G_opac;
        document.images["smallpics"].style.filter = "alpha( opacity=" + parseInt(100*G_opac) + ")";
    }
    
    <!-- Zähler erhöhen -->
    num++;

    if ( num < schritte )
    {   setTimeout( "bereichVeraendern()", zeit);
        //bereichVeraendern();
    }
    else
    {   G_opac = 1.00;
        document.images["b1"].style.opacity = G_opac;
        document.images["b1"].style.filter  = "alpha( opacity=100)";
        document.images["b1"].style.clip = "rect(auto auto auto auto)";

        G_texobj1.style.opacity = G_opac;
        G_texobj1.style.filter  = "alpha( opacity=100 )";
        G_texobj2.style.opacity = 0.00;
        G_texobj2.style.filter  = "alpha( opacity=0 )";

        G_first_time = false;

        //alert( "filter von text1 " + G_texobj1.style.filter );
        //alert( "filter von text2 " + G_texobj2.style.filter );
    }
}

function zeige_info()
{   var i = 0;
    var img_trans = 0.00;
    var textrans  = 0.50;
    var delta_img = 0.00;
    var delta_txt = 0.005;
    var ttt_top   = 0;
    var mystr     = "";

    var imgobj  = document.getElementById( "bildinfo" );
    var texobj1 = document.getElementById( "textinfo1" );
    var texobj2 = document.getElementById( "textinfo2" );

    if ( G_info_visible )
    {   texobj2.style.visibility = "hidden";
        texobj1.style.visibility = "hidden";
        imgobj.style.visibility  = "hidden";

        G_info_visible = false;
    }
    else
    {   texobj2.style.visibility = "visible";
        texobj1.style.visibility = "visible";
        imgobj.style.visibility  = "visible";

        G_info_visible = true;
    }
}

function adjust_trans( )
{   var imgobj = document.getElementById( "bildinfo" );

    imgobj.style.opacity = trans[ G_act_image ];
    imgobj.style.filter  = "alpha( opacity=" + parseInt(100*trans[G_act_image]) + ")";
}

function move_image_left( )
{   if ( ( G_act_links > G_first_links-(G_all_img_width-G_vis_img_width ) ) && ( G_zaehl < G_anz_img_visible*G_one_img_width) )
    {   G_act_links = G_act_links - G_schritt;
        G_act_clip_rechts = G_act_clip_rechts + G_schritt;
        G_act_clip_links  = G_act_clip_links + G_schritt;
        var clip_string = "rect(0px "+G_act_clip_rechts+"px 65px "+G_act_clip_links+"px)";
        document.images["smallpics"].style.clip = clip_string;
        document.images["smallpics"].style.left = G_act_links+"px";
        G_zaehl = G_zaehl + G_schritt;
        setTimeout( "move_image_left()", G_zeit ); 
    }
    else
    {   G_zaehl = 0;
        return false;
    }
}

function move_image_right( )
{   if ( ( G_act_links < G_first_links ) && ( G_zaehl < G_anz_img_visible*G_one_img_width ) )
    {   G_act_links = G_act_links + G_schritt;
        G_act_clip_rechts = G_act_clip_rechts - G_schritt;
        G_act_clip_links  = G_act_clip_links - G_schritt;
        var clip_string = "rect(0px "+G_act_clip_rechts+"px 65px "+G_act_clip_links+"px)";
        document.images["smallpics"].style.clip = clip_string;
        document.images["smallpics"].style.left = G_act_links+"px";
        G_zaehl = G_zaehl + G_schritt;
        setTimeout( "move_image_right()", G_zeit );
    }
    else
    {   G_zaehl = 0;
        return false;
    }
}

function pageUnload()
{   var oben = 0;
    var rechts;
    var links = 0;
    var unten;
    var deltax;

    alert( "in pageUnload" );
    
    <!-- Auf das Bild zugreifen -->
    var bildObj = document.getElementById("b1");

    <!-- Initialisierung von oben, links, rechts und unten -->
    rechts = bildObj.width;
    unten  = bildObj.height;

    deltax = Math.round( rechts / 100 );
    alert( "deltax " + deltax );

    bereichVerkleinern();


function bereichVerkleinern()
{   links  = links + deltax;
    rechts = rechts - deltax;

    document.images["b1"].style.clip = "rect(" + oben + "px " + rechts + "px " + unten + "px " + links +"px)";

    if ( links < rechts )
	{   bereichVerkleinern();
    }
    else
    {   document.images["b1"].style.clip = "rect( 0px 0px 0px 0px)";
    }
}
}