www.webdeveloper.com
Results 1 to 4 of 4

Thread: Moving Image

  1. #1
    Join Date
    Mar 2012
    Posts
    4

    Moving Image

    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>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,688
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Mar 2012
    Posts
    4

    Thanks

    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?

  4. #4
    Join Date
    Mar 2012
    Posts
    4

    polite bump

    polite bump

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles