Raile: Bild einfliegen lassen

Beitrag lesen

Kann ich mit HTML beim Betreten einer Seite ein Bild hereinfliegen lassen? Kann mir wer die entsprechenden Befehle geben.
Danke schonmal
Michi Lang, webmaster www.fatemusic.de

Hallo zusammen,

aber klar geht das, allerdings nur mit JS und DHTML.
Ich habe da mal was geschrieben, sieht so aus:

//
// check for browser
//
if (navigator.appName.substring(0,1)=="N")
   {
   var NS = true ;
   var IE = false ;
   var screenWidth = screen.width ;
   var screenHeight = window.innerHeight ;
   }
else
   {
   var NS = false ;
   var IE = true ;
   var screenWidth = screen.width ;
   var screenHeight = screen.height ;
   var layers = document.all.tags("DIV") ;
   }
var BVERS = navigator.appVersion.substring(0,1) ;

var numbLayers = 3 ;                  // total number of layers
var seriell = true  ;                 // serialize = true, all together = false
var animationStep = 3 ;               // pixel step
var animationTime = 40 ;              // interval time

var endPositionLeft = new Array(numbLayers) ;
var actPositionLeft = new Array(numbLayers) ;
var endPositionTop  = new Array(numbLayers) ;
var actPositionTop  = new Array(numbLayers) ;

var runningLayer    = new Array(numbLayers) ;

var xLeft = new Array(numbLayers) ;
var xTop  = new Array(numbLayers) ;
var dirLeft = new Array(numbLayers) ;
var dirTop  = new Array(numbLayers) ;
var finished = new Array(numbLayers) ;

var ANIM ;

//
// Layernumber, STARTPosLEFT, STARTPosTOP, ENDPosLEFT, ENDPosTOP
//
function setAnimation(Layer, sPLeft, sPTop, ePLeft, ePTop)
{

if (sPLeft < ePLeft)   // check direction (left)
      dirLeft[Layer] = +1 ;
   else
      if (sPLeft > ePLeft)
         dirLeft[Layer] = -1 ;
      else
         dirLeft[Layer] = 0 ;

if (sPTop < ePTop)     // check direction (top)
      dirTop[Layer] = +1 ;
   else
      if (sPTop > ePTop)
         dirTop[Layer] = -1 ;
      else
         dirTop[Layer] = 0 ;

if (ePTop == sPTop)    // check move difference
      var lenLeft = 1 ;
   else
      var lenLeft = (ePLeft - sPLeft) / (ePTop - sPTop);

if (lenLeft < 0)
      lenLeft *= -1 ;

xLeft[Layer] = dirLeft[Layer] * animationStep * lenLeft;
   xTop[Layer]  = dirTop[Layer] * animationStep ;

actPositionLeft[Layer] = sPLeft ;
   endPositionLeft[Layer] = ePLeft ;
   actPositionTop[Layer]  = sPTop ;
   endPositionTop[Layer]  = ePTop ;

finished[Layer] = false ;

runningLayer[Layer] = true ;

if (Layer > 0 && seriell)   // if serialisation then remember
      runningLayer[Layer] = false ;

}
//
// start animation
//
function startAnimation()
{
  ANIM = setTimeout("Animate()", animationTime) ;
}
//
// real animation
//
function Animate()
{

var endOfAll = true ;

for (var i=0; i<numbLayers; i++)
      {
      if (actPositionLeft[i]*dirLeft[i] <= endPositionLeft[i]*dirLeft[i] && // check for final position
          actPositionTop[i]*dirTop[i] <= endPositionTop[i]*dirTop[i])
         {
         if (runningLayer[i])  // is it the running animation ?
            {
            if (NS)  // Netscape ?
               {
               window.document.layers[i].left = actPositionLeft[i] ;
               actPositionLeft[i] += xLeft[i] ;
               window.document.layers[i].top = actPositionTop[i] ;
               actPositionTop[i] += xTop[i] ;
               }
            else     // or IEx
               {
               layers[i].style.left = actPositionLeft[i] ;
               actPositionLeft[i] += xLeft[i] ;
               layers[i].style.top = actPositionTop[i] ;
               actPositionTop[i] += xTop[i] ;
               }
            }
         }
      else    // final position reached
         {
         finished[i] = true ;
         runningLayer[i] = false ;  // terminate actual layer
         if (i<(numbLayers-1))      // and set next to actual
            runningLayer[i+1] = true ;
         }
      }
   for (i=0; i<numbLayers; i++) // check if all layers have finished
       {
        if (!finished[i])
          endOfAll = false ;
       }
   if (endOfAll)    // terminate if all have finished
      {
      clearTimeout(ANIM) ;
      }
   else     // else set delay
      ANIM = setTimeout("Animate()", animationTime) ;
}

mit folgenden Layern:

<div ID="Gse1" STYLE="position:absolute; left:-200px; top:10px">
<img SRC="images/GSE-n.gif" BORDER="0" WIDTH="210" HEIGHT="194">
</div>
<div ID="Isv1" STYLE="position:absolute; left:-200px; top:10px">
<img SRC="images/isv-n.gif" BORDER="0" WIDTH="189" HEIGHT="126">
</div>
<div ID="Butt1" STYLE="position:absolute; left:50px; top:420px">
<img SRC="images/isv-n.gif" BORDER="0" WIDTH="189" HEIGHT="126">
</div>

und folgendem JS-Code im HTML-Teil.

<script Language="JavaScript">

setAnimation(0,   10, 10, 220, 50) ;
 setAnimation(1,   350, 200,   230, 250) ;

startAnimation() ;

</script>

Viel Spass,

Raile