Moving Image

**crahey** · 03-20-2012 12:19 AM

It seems my previous comment disappeared

So, I'm looking at the following code. I've implemented it into my site and it's working fine, however, i'm now after it duplicated a couple of seconds later, at a different part of the screen. I'm currently struggling with multiple functions onload. How would I duplicate this code to have another moving image follow this one?

Thanks in Advance

Code:

<html>

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

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

function doFancyBearPaww()
{
    if ( document.getElementById )
        thePaww = document.getElementById("BearPaww");
    else if ( document.layers )
        thePaww = document.layers["BearPaww"];
    else if ( document.all )
        thePaww = document.all.item("BearPaww");

    if ( thePaww )
    {
        hideObj( thePaww );
        var now = new Date();
        var secs = now.getSeconds() % 6;
        if ( secs < 12 )
            doBottomToTop();
        else if ( secs < 12 )
            doTopToBottom();
        else if ( secs < 12 )
            doRightToLeft();
        else
            doReveal();
    }
}

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 < 12 )
            doBottomToTop();
        else if ( secs < 12 )
            doTopToBottom();
        else if ( secs < 12 )
            doRightToLeft();
        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( thePaww, xPos, yPos );
    showObj( thePaww );
    moveHoriz();
}

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

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

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

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

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

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

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

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

//-->
</script>

</head>

<body onload="doFancyBearPaww()">

<div align="center">
<div id="BearPaww" name="BearPaww"
style="filter: revealTrans(duration=3.0, transition=23); height:100; width:80;">
  <img src="http://www.mitch.bigyetimedia.com/wp-content/uploads/2012/03/What-if-Button-singular2.png" border="0" noresize="true" alt="aperture patch post" class="mouseover" data-oversrc="http://www.mitch.bigyetimedia.com/wp-content/uploads/2012/03/What-if-Button-Surround-21.png" class="mouseout" data-oversrc="http://www.mitch.bigyetimedia.com/wp-content/uploads/2012/03/What-if-Button-singular2.png"/></a>
</div>
</div>

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         </body>

</html>

**vwphillips** · 03-20-2012 05:38 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

.move {
  position:absolute;visibility:hidden;left:300px;
}

/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/

 function Animate(id,mde,f,t,ms){
  var obj=document.getElementById(id);
  if (obj&&typeof(f)=='number'&&typeof(t)=='number'&&(mde=='top'||mde=='left')){
   obj.style.visibility='visible';
   animate(obj,mde,f,t,new Date(),ms||1000)
  }
 }

 function animate(obj,mde,f,t,srt,mS){
  var ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   obj.style[mde]=now+'px';
  }
  if (ms<mS){
   setTimeout(function(){ animate(obj,mde,f,t,srt,mS); },10);
  }
  else {
   obj.style[mde]=t+'px';
  }
 }


/*]]>*/
</script></head>

<body>
<img id="m1" class="move" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" />
<img id="m2" class="move" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" />
<img id="m3" class="move" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" />

<script type="text/javascript">
/*<![CDATA[*/
Animate('m1','top',600,200,1000);
Animate('m2','top',0,700,500);
setTimeout(function(){
  Animate('m3','top',0,700,1500);
  Animate('m3','left',0,700,1500);
 },2000);
/*]]>*/
</script>
</body>

</html>

**crahey** · 03-20-2012 06:54 PM

perfect, thank you.

I'm just amending the code now.

As I'm a bit of a noob, i've managed to get the three images to float in, from the bottom, in 'near' the positions that I would like them too. However, I'm working under 'absolute' in px and wonder what would happen, as I want the images symmetrical with the center of the screen, if the viewer has a different screen size. How do I set the first image to enter 'center' and the other images to be 'relative' to it?

**crahey** · 03-22-2012 01:02 PM

polite bump

Thread: Moving Image

Thread Tools

Display

Moving Image

Thanks

polite bump

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions