topical media & game development

talk show tell print

graphic-javascript-effect-image-rotate.js / js



  /* This script and many more are available free online at
  The JavaScript Source!! http://javascript.internet.com
  Created by: Benoit Asselin | http://www.ab-d.fr */
  
  function rotate(p_deg) {
          if(document.getElementById('canvas')) {
                  /*
                  Ok!: Firefox 2, Safari 3, Opera 9.5b2
                  No: Opera 9.27
  		*/
                  var image = document.getElementById('image');
                  var canvas = document.getElementById('canvas');
                  var canvasContext = canvas.getContext('2d');
                  
                  switch(p_deg) {
                          default :
                          case 0 :
                                  canvas.setAttribute('width', image.width);
                                  canvas.setAttribute('height', image.height);
                                  canvasContext.rotate(p_deg * Math.PI / 180);
                                  canvasContext.drawImage(image, 0, 0);
                                  break;
                          case 90 :
                                  canvas.setAttribute('width', image.height);
                                  canvas.setAttribute('height', image.width);
                                  canvasContext.rotate(p_deg * Math.PI / 180);
                                  canvasContext.drawImage(image, 0, -image.height);
                                  break;
                          case 180 :
                                  canvas.setAttribute('width', image.width);
                                  canvas.setAttribute('height', image.height);
                                  canvasContext.rotate(p_deg * Math.PI / 180);
                                  canvasContext.drawImage(image, -image.width, -image.height);
                                  break;
                          case 270 :
                          case -90 :
                                  canvas.setAttribute('width', image.height);
                                  canvas.setAttribute('height', image.width);
                                  canvasContext.rotate(p_deg * Math.PI / 180);
                                  canvasContext.drawImage(image, -image.width, 0);
                                  break;
                  };
                  
          } else {
                  /*
                  Ok!: MSIE 6 et 7
  		*/
                  var image = document.getElementById('image');
                  switch(p_deg) {
                          default :
                          case 0 :
                                  image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
                                  break;
                          case 90 :
                                  image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
                                  break;
                          case 180 :
                                  image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
                                  break;
                          case 270 :
                          case -90 :
                                  image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
                                  break;
                  };
                  
          };
  };
  
  // Multiple onload function created by: Simon Willison
  // http://simonwillison.net/2004/May/26/addLoadEvent/
  function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = func;
    } else {
      window.onload = function() {
        if (oldonload) {
          oldonload();
        }
        func();
      }
    }
  }
  
  addLoadEvent(function() {
          var image = document.getElementById('image');
          var canvas = document.getElementById('canvas');
          if(canvas.getContext) {
                  image.style.visibility = 'hidden';
                  image.style.position = 'absolute';
          } else {
                  canvas.parentNode.removeChild(canvas);
          };
          
          rotate(0);
  });
  
  


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