Solved

Animation

Posted on 1998-04-29
3
306 Views
Last Modified: 2013-12-25
I have a document with ten pictures on it. I am trying to get the tenth picture to be an animated version of all the others - it will cycle between image 1, image 2, image 3... etc

1) How can I do this without using a seperate object for each picture (can I, since they are already on the page somewhere)?

2) How do I string the frames together? I tried setting my animate procedure in the mouse over event of all the links on the page, but that still only works if the user moves the mouse continuously over the page!!!!

If someone could provide commented source for this, I would be happy to give you a buncha points and my first born male child.

Thanks!!!!!!!
0
Comment
Question by:cheeseman
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 1

Accepted Solution

by:
jbabcock earned 200 total points
ID: 1854394
Answer coming...
0
 
LVL 1

Expert Comment

by:jbabcock
ID: 1854395
Hi!

You don't need to use mouse events to achieve that. Rather, you should set a timeout on the window, and let it repeat your
procedure every so often.

First you need to name all those images you want to animate. Make sure the names have the same prefix, and sequential
numbers, like so -


    <IMG SRC="Picture0.gif" NAME="Logo0">
    <IMG SRC="Picture1.gif" NAME="Logo1">
    <IMG SRC="Picture2.gif" NAME="Logo2">
    <IMG SRC="Picture3.gif" NAME="Logo3">
    <IMG SRC="Picture4.gif" NAME="Logo4">
    <IMG SRC="Image5.gif" NAME="Logo5">
    <IMG SRC="Image6.gif" NAME="Logo6">
    <IMG SRC="Image7.gif" NAME="Logo7">
    <IMG SRC="Image8.gif" NAME="Logo8">
    <IMG SRC="Image9.gif" NAME="Logo9">


and you need to name the image you want to animate -


<IMG SRC="Image9.gif" HEIGHT=151 WIDTH=135 NAME="Swap">


Now you need to add the engine to swap them.


    <SCRIPT LANGUAGE="Javascript">
      <!--

        // this tests for a browser that can animate images in this manner
        browser = (((navigator.appName == "Netscape") &&
                    (parseInt(navigator.appVersion) >= 3 )) ||
                   ((navigator.appName == "Microsoft Internet Explorer") &&
                    (parseInt(navigator.appVersion) >= 4 )))

        // the last frame of our animation
        MaxFrame = 9;

        // frame to start at
        TimerStep = 0;

        // ticks between frames
        TimerSpeed = 120;

        // this will be our main function
        function TimerTick() {

          // if we found a browser this will work in      
          if (browser) {

            // go to the next frame
            TimerStep++;

            // return to the first frame if we pass the last
            if (TimerStep > MaxFrame) {
              TimerStep = 0;
            }

            // swap to the next image
            document ["Swap"].src = document ["Logo" + TimerStep].src;

            // set the timer
            window.setTimeout("TimerTick()", TimerSpeed );
          }
        }

      //-->
    </SCRIPT>


Now, all you have left to do is to start it all off by running the TimerTick procedure when the document loads -

<BODY onLoad="TimerTick();">


Hope this helps!
0
 

Author Comment

by:cheeseman
ID: 1854396
Thanks alot! I'll FedEx you the kid right away! =)
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Please explain purpose of GZIP 4 59
Print a <div></div> only 5 39
ASP.NET data base connection 35 40
Ways to Manage 2 Development Projects on Same Section 1 20
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question