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