Dynamic HTML
Moving Image
Grizzly WebMaster home
 Grizzly WebMaster (HOME) >> Dynamic HTML >> Moving Image
This is an example of a moving image script that works well with both Internet Explorer and Navigator.  This script actually has several different movement algorithms.
Save Source
Right mouse button here and select "save target as" to save the source

Obviously before using these functions you would want to remove the verbose comments.

See this script in action.


<html>

<head>
<title>Moving Image Example</title>
<style type="text/css">
<!--
#BearPaw     { position: relative; visibility: hidden }
-->
</style>
<script language="JavaScript">
<!--

var thePaw;
var yPos = 0;
var xPos = 0;
var dSign = 1;

function doFancyBearPaw()
{
    if ( document.getElementById )
        thePaw = document.getElementById("BearPaw");
    else if ( document.layers )
        thePaw = document.layers["BearPaw"];
    else if ( document.all )
        thePaw = document.all.item("BearPaw");

    if ( thePaw )
    {
        hideObj( thePaw );
        var now = new Date();
        var secs = now.getSeconds() % 6;
        if ( secs < 1 )
            doBottomToTop();
        else if ( secs < 2 )
            doLeftToRight();
        else if ( secs < 3 )
            doTopToBottom();
        else if ( secs < 4 )
            doRightToLeft();
        else if ( secs < 5 )
            doFootPrints();
        else
            doReveal();
    }
}

function moveObjTo( obj, x, y )
{
    if ( ! obj.style )
    {
        obj.top = y;
        obj.left = x;
    }
    else
    {
        obj.style.top = y + "px";
        obj.style.left = x + "px";
    }
}


function showObj( obj )
{
    if ( ! obj.style )
        obj.visibility = "visible";
    else
        obj.style.visibility = "visible";
}

function hideObj( obj )
{
    if ( ! obj.style )
        obj.visibility = "hidden";
    else
        obj.style.visibility = "hidden";
}

function doRightToLeft()
{
    xPos = 500;
    dSign = 1;
    moveObjTo( thePaw, xPos, yPos );
    showObj( thePaw );
    moveHoriz();
}

function doLeftToRight()
{
    xPos = 500;
    dSign = -1;
    moveObjTo( thePaw, (xPos * dSign), yPos );
    showObj( thePaw );
    moveHoriz();
}

function moveHoriz()
{
    var dec = Math.sqrt(xPos);
    xPos -= dec;
    if ( 0 < xPos )
    {
        moveObjTo( thePaw, (xPos * dSign), yPos );
        setTimeout( "moveHoriz()", 40 );
    }
    else
    {
        moveObjTo( thePaw, 0, 0 );
    }
}

function doBottomToTop()
{
    yPos = 700;
    dSign = 1;
    moveObjTo( thePaw, xPos, yPos );
    showObj( thePaw );
    moveVert();
}

function doTopToBottom()
{
    yPos = 200;
    dSign = -1;
    moveObjTo( thePaw, xPos, -yPos );
    showObj( thePaw );
    moveVert();
}

function moveVert()
{
    var dec = Math.sqrt(yPos/2);
    yPos -= dec;
    if ( 0 < yPos )
    {
        moveObjTo( thePaw, xPos, yPos * dSign );
        setTimeout( "moveVert()", 40 );
    }
    else
    {
        moveObjTo( thePaw, 0, 0 );
    }
}

function doFootPrints()
{
    yPos = 700;
    xPos = 25;
    moveObjTo( thePaw, xPos, yPos );
    showObj( thePaw );
    setTimeout( "moveFootPrint()", 50 );
}

function moveFootPrint()
{
    yPos -= 75;
    xPos *= -1;
    if ( 0 < yPos )
    {
        moveObjTo( thePaw, xPos, yPos );
        setTimeout( "moveFootPrint()", 400 );
    }
    else
    {
        moveObjTo( thePaw, 0, 0 );
    }
}

function doReveal()
{
    if ( ! thePaw.filters )
    {
        doLeftToRight();
    }
    else
    {
        thePaw.style.visibility = "hidden";
        thePaw.filters[0].Apply();
        thePaw.filters.item(0).transition = 23;
        thePaw.style.visibility = "visible";
        thePaw.filters[0].Play();
    }
}

//-->
</script>

</head>

<body onload="doFancyBearPaw()">

<div align="center">
<div id="BearPaw" name="BearPaw"
style="filter: revealTrans(duration=3.0, transition=23); height:100; width:80;">
  <img src="../../images/bearpawc3.gif" border="0" width="80" height="100">
</div>
Select Refresh to see a random motion
</div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         </body>

</html>
Service Provided by Bear Consulting Group Last modified: 25 May 2009
Copyright 2001 Bear Consulting Group