Special Negative Roll-Over Effect

/** By default the CS-CUBED logo uses the image tag in main.html.  If jCanvas has loaded and is
* compatible with the browser, the logo is rendered from the canvas tag, and a special roll-over
* negative effect is produced.  If the browser is incompatible, the default image tag is used with
* the normal CSS roll-over image effects.  The HTML page using this, which in this case is
* main.html, must include browser-type.js for this to work. */
$(document).ready(function() {
  if (jCanvas && jCanBrowComp()) {
    $('.myLogoCan').addClass('show').removeClass('hide');
    $('.myLogoImg').addClass('hide').removeClass('show');
  }

  // If jCanvas has loaded, use the canvas tag to show it and call invert on mousemove.
  $('.myLogoCan').drawImage({
    layer: true,
    source: 'img/cube.gif',
    width: 150, height: 150,
    x:75, y:75, mousemove:invert
  });

  // On mousemove, part of the image is made negative.
  function invert(params) {
    $(this).setPixels({
      x:params.eventX, y:params.eventY,
      width:65, height:65,
      // loop through each pixel.
      each: function(px) {
        px.r = 255 - px.r;
        px.g = 255 - px.g;
        px.b = 255 - px.b;
      }
    });
  }

  // Navigates to the technical details page.
  $('.myLogoCan').click(function() {
    window.open('technical.html', '_self');
  });
});
Return to Technical Details.