...

View Full Version : Alternate Animated Image Script



Taro
02-27-2012, 09:47 PM
Hello,:D

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.



<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).

VIPStephan
02-28-2012, 12:01 AM
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?

Taro
02-28-2012, 12:25 AM
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,:D

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.


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.

felgall
03-22-2012, 08:21 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum