Bild einfliegen lassen

[Michi Lang]

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

[Cheatah]

Hi,

Kann ich mit HTML beim Betreten einer Seite ein Bild hereinfliegen lassen? Kann mir wer die entsprechenden Befehle geben.

nein und nein. HTML ist eine Strukturbeschreibungssprache, d.h. es existieren keine Befehle. Was Du suchst ist DHTML, also die Kombination aus HTML, CSS und JavaScript - nur letzteres ist eine Programmiersprache. Die Thematik ist in sich komplex, aber erlernbar.

Cheatah

[Bürgle]

Kann ich mit HTML beim Betreten einer Seite ein Bild hereinfliegen lassen? Kann mir wer die entsprechenden Befehle geben.

Hi!

Ich habe hier vor wenigen Tagen für jemand sowas programmiert, leider finde ich momentan diesen Tread nicht mehr... :(
Ich vermute, durch die Umstellungen gehen hier Treads verloren?
Jedenfalls sollte man grob wissen, was wie woher u.s.w. einfliegen soll.

Grüße, Bürgle

[Schuer]

Hallo,

Kann ich mit HTML beim Betreten einer Seite ein Bild hereinfliegen lassen? Kann mir wer die entsprechenden Befehle geben.

Dafür ist HTML nun wirklich nicht gedacht. Für einen solchen Unsinn benötigt man Flash und sehr viel Geduld! Fliegende Bilder sind sozusagen das Markenzeichen eines wundervollen Flash-Intros auf abertausenden von privaten Webseiten. Willst Du wirklich auf diesen Zug aufspringen?

Gruß,
_Dirk

[Raile]

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