Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post

    Post Alternate Animated Image Script

    Hello,

    This is a JavaScript snippet that can be used for image animations, mostly supported in the .gif extension file (.apng extension file may be deprecated in this case). The most important part of the code is from the script source in the <head> section to the end, the </head> tag. The target must be the file that includes multiple images, preferably three (best performance). Any other coding is just used to display the scripting function in an easier environment.

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="HTML5_thrColFixHdr.css" rel="stylesheet" type="text/css" /><!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type="text/javascript"> 
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
     
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
     
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    <body>
    
    <img src="image location.extension" width="number value" height="number value" alt="alternate display name" />
    
    </body>
    </html>
    Note that there are three complex steps for the animation to happen: pre-loading the image, finding the object, and swapping the image. The swapImage() function is excluded internally from the OnLoad() function in the body due to header organization and the newer html standards (HTML 5).
    Last edited by Taro; 02-27-2012 at 10:47 PM. Reason: forgot something
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,728
    Thanks
    6
    Thanked 1,015 Times in 988 Posts
    I don’t get it. All I see is apparently Dreamweaver generated JavaScript for creating an image mouseover effect. I don’t see what this has to do with animated GIFs specifically and I also don’t see what this has to do with HTML 5, as I see none.

    So, please elaborate: What exactly is your effort here?

  • #3
    Regular Coder Taro's Avatar
    Join Date
    Oct 2011
    Location
    Geraldton, Ontario
    Posts
    155
    Thanks
    1
    Thanked 1 Time in 1 Post
    Quote Originally Posted by VIPStephan View Post
    I don’t get it. All I see is apparently Dreamweaver generated JavaScript for creating an image mouseover effect. I don’t see what this has to do with animated GIFs specifically and I also don’t see what this has to do with HTML 5, as I see none.

    So, please elaborate: What exactly is your effort here?
    Hello Stephan,

    Posting this script is useful because:

    The code is straight-forward. People that are from different levels of experience can have an easy understanding of how to apply the code to their projects/ assignments/ pages. If they have a problem animating an image that contains multiple images, they could look to the script for help.

    Quote Originally Posted by VIPStephan View Post
    image mouseover effect.
    No, this is not an image mouseover effect. The GIF image animates on page load, depending on the number of steps (Dreamweaver has a maximum of one second delay before the next image transition). I may upload a link to an actual animated, non-mouseover image for proof.
    Last edited by Taro; 02-27-2012 at 11:33 PM. Reason: forgot something
    Element ID

    Webs Support Helper

    Your friendly neighborhood Taroman.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Looks like a straightforward image swap using about 10 times as much code as is really needed if you are going to use an obtrusive approach like that.

    You could go for a completely unobtrusive version and probably still end up with less code.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    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
    •