Script Categories













Background Effects >>> Growing Image.

Resizes an image to the size given to the function.

Step 1: Add the below code to the <body> section of your page:

 
<SCRIPT LANGUAGE="JavaScript">
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */

<!-- Begin
var ival, imgname, total, steps, maxx, maxy, currentx, currenty, dx, dy;
function zoomImg(imgname, total, steps, maxx, maxy) {
// convert the total from seconds to miliseconds
total = total * 1000;
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
// work out how much we need to increase the image by each step
// devide image sizes by number of steps to get the amount we need to change each step
stepx = maxx / steps;
stepy = maxy / steps;
// devide the total time (in ms) by the number of steps to get the interval time
inttime = total / steps;
// set the interval to increase the size of the image by the required pixels
functionRef = "resizeImg('"+imgname+"', "+stepx+", "+stepy+", "+maxx+", "+maxy+")";
ival = setInterval(functionRef, inttime);
}
function resizeImg(imgname, dx, dy, maxx, maxy) {
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
if ((currentx<maxx-dx) && (currenty<maxy-dy)) {
objref.height = currenty + dy;
objref.width = currentx + dx;
}
else {
clearInterval(ival);
objref.height = maxy;
objref.width = maxx;
   }
}
document.write('<div align="center"><img src="astronaut.png" name="test" id="test" height="2" width="3"></div>');
document.onload=zoomImg('test', 10, 150, 300, 200);
//  End -->
</script>      

Step 2: The script uses an image as part of its interface. You can create your own, or use the below (resized for easier download):

(right click image, and select "Save Image As")
Upload it into the same directory as your webpage.

Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.



Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).




©