Results 1 to 7 of 7

Thread: How to create Animated Images using JavaScript?

  1. #1
    Join Date
    Aug 2006
    Posts
    287

    How to create Animated Images using JavaScript?

    Is it possible to create animated images in JavaScript. I have never created any animation images in JavaScript. I have done that in other applications. I came to know that we can create that in JavaScript also. Can anyone tell me how to create Animated Images using JavaScript? It would be much better if you provide the coding for creating animated images in JavaScript.!!
    Dimension 1100 (FMY032J) mini-tower
    2.53ghz Intel Pentium 4
    80 gig nfts HDD
    512 RAM
    Main circuit board: Dell 0CF458
    BIOS: Dell A00
    Display: Intel(R) 82865G Graphics Controller [Display adaptor]
    Multimedia: Sound MAX Integrated Digital Audio
    Windows XP Home SP2

  2. #2
    Join Date
    Aug 2006
    Posts
    227

    Re: How to create Animated Images using JavaScript?

    You can create animated images using the JavaScript. The idea behind Javascript-based animation is fairly simple; a number of DOM elements are moved around the page according to some sort of pattern determined by a logical equation or function. The trick is to let a JavaScript change between different images on different events. To achieve the effect of animation, elements must be moved at a given interval or frame rate; from a programming perspective, the simplest way to do this is to set up an animation loop with a delay. The onMouseOver event tells the browser that once a mouse is rolled over the image, the browser should execute a function that will replace the image with another image.
    I do to dead flowers what people at morgues do to dead people. Suck all the moisture out, dip them in plastic, paint them up pretty and put them in a nice frame.

  3. #3
    Join Date
    Jul 2006
    Posts
    286

    Re: How to create Animated Images using JavaScript?

    I have given you an example so that you can understand the concept very clearly. I have added an image that should act as a link button on a web page in the following example. Then I have added an events like onMouseOver and onMouseOut which are commonly used while creating an image. These two events will run two JavaScript functions that will change between the images. The HTML code will be :
    HTML Code:
    <a href="http://www.techarena.com" target="_blank">
    <img border="0" alt="Visit TechArena!" src="welcome.gif" id="b1"
    onmouseOver="mouseOver()" onmouseOut="mouseOut()" /></a>
    And after writing code in HTML, the changing between the images is done with the following JavaScript :
    Code:
    <script type="text/javascript">
    function mouseOver()
    {
    document.getElementById("b1").src ="hi.gif";
    }
    function mouseOut()
    {
    document.getElementById("b1").src ="welcome.gif";
    }
    </script>
    IF you hate me, please don't mention it. I know who hates me and who doesn't. You really do not have to make fun of people....

  4. #4
    Join Date
    Jul 2006
    Posts
    442

    Re: How to create Animated Images using JavaScript?

    I think that you will get confused with the coding that 'Deabelos' has provided you. So I have combined that coding and given it below :
    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    function mouseOver()
    {
    document.getElementById("b1").src ="hi.gif";
    }
    function mouseOut()
    {
    document.getElementById("b1").src ="welcome.gif";
    }
    </script>
    </head>
    
    <body>
    <a href="http://www.techarena.com" target="_blank">
    <img border="0" alt="Visit TechArena!" src="welcome.gif" id="b1"
    onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
    </body>
    </html>
    "When they give you ruled paper, write the other way..." J.R.J.

  5. #5
    Join Date
    Nov 2008
    Posts
    1,192

    Re: How to create Animated Images using JavaScript?

    You should have understood the concept of using the animated images. Yet I thought to provide you more information about the same. The jpg image format has no provision for animation, however, with a little JavaScript and a dash of creativity, we can easily make an "animated" jpg. You will have to start by preloading all the jpg images required in the "animation". The second step is to use a function that changes the source of an image. And then at last, we call this function repeatedly by employing the setTimeout() method. I generally say that Animation is like hot sauce - a little goes a long way. Use it sparingly to spice up your page and enhance your content.

  6. #6
    Join Date
    May 2008
    Posts
    2,389

    Re: How to create Animated Images using JavaScript?

    The jpg image format has no provision for animation, however, with a little JavaScript and a dash of creativity, we can easily make an "animated" jpg. Changing the position of the background image felt to be the best approach to creating the type of effect. Before using the Animated Images using JavaScript, you should know the following things :
    • Always start with images that are the same size or the browser will scale them to fit.
    • JavaScript rollovers only work inside the anchor <A> tag. The beginners make two common mistake that are to include them in the IMG or forget to include the NAME attribute in the IMG tag.
    • Also be sure to test all your JavaScript applications when the final version is released.
    • Animation effects created with JavaScript won't work if users have JavaScript turned off in their browsers.

  7. #7
    Valentina_Sk Guest

    Re: How to create Animated Images using JavaScript?

    Why don not you use Video Avatar?
    Very easy to use program for creating gifs)
    I like it)

Similar Threads

  1. Lumia Cinemagraph not saving animated images any more
    By Kuna! in forum Portable Devices
    Replies: 4
    Last Post: 08-10-2013, 12:07 PM
  2. How to create Animated Avatars
    By JonathanD in forum Windows Software
    Replies: 4
    Last Post: 24-05-2010, 01:33 PM
  3. How to create Animated GIF files for website in Mac?
    By MAGAR in forum Operating Systems
    Replies: 4
    Last Post: 06-04-2010, 06:49 PM
  4. Don't know how to create GIF animated image
    By teena_pansare in forum Windows Software
    Replies: 5
    Last Post: 18-12-2009, 10:14 AM
  5. Replies: 3
    Last Post: 04-04-2009, 11:13 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Page generated in 1,711,636,458.10553 seconds with 16 queries