topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

graphic-javascript-effect-image-grow-effect.htm / htm



  
  <!-- THREE STEPS TO INSTALL GROWING IMAGE:
  
    1.  Copy the coding into the HEAD of your HTML document
    2.  Add the onLoad event handler into the BODY tag
    3.  Put the last coding into the BODY of your HTML document  -->
  
  <!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
  
  <HEAD>
  
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Original:  Mike Dransfield (mike@blueroot.net) -->
  <!-- Web Site:  http://mike.dransfield.org/ -->
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- 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;
     }
  }
  //  End -->
  </script>
  
  </HEAD>
  
  <!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->
  
  <BODY onLoad="zoomImg('test', 10, 150, 300, 200)">
  
  <!-- STEP THREE: Copy this code into the BODY of your HTML document  -->
  
  <div align="center"><img src="http://yoursite.com/img.gif" name="test" id="test" height="2" width="3"></div>
  
  <p><center>
  <font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
  by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
  </center><p>
  
  <!-- Script Size:  2.24 KB -->
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.