Угловой банер (полностью рабочая версия)

(function($){  
  $.fn.fold = function(options) {  
  var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);  
  var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);  
   
  // We just won't show it for IE5.5 and IE6. Go away. I'm really tempted to write "document.location= 'http://www.getfirefox.com';" here.  
  if (ie55 || ie6) {this.remove(); return true;}  
   
  // New - you don't have to specify options!  
  options = options || {};  
   
  // Default awesomeness  
  var defaults = {  
  directory: '.', // The directory we're in  
  side: 'right', // change me to "right" if you want rightness  
  turnImage: 'fold-sw.png', // The triangle-shaped fold image  
  maxHeight: 400, // The maximum height. Duh.  
  startingWidth: 80, // The height and width  
  startingHeight: 80, // with which to start (these should probably be camelCase, d'oh.)  
  autoCurl: true // If this is set to true, the fold will curl/uncurl on mouseover/mouseout.  
  };  

  // Change turnImage if we're running the default image, and they've specified 'right'  
  if (options.side == 'right' && !options.turnImage) defaults.turnImage = 'fold-sw.png';  
   
  // Merge options with the defaults  
  var options = $.extend(defaults, options);  
   
  // Set up the wrapper objects  
  var turn_hideme = $('<div id="turn_hideme">');  
  var turn_wrapper = $('<div id="turn_wrapper">');  
  var turn_object = $('<div id="turn_object">');  
  var img = $('<img id="turn_fold" src="'+ (options.directory+'/'+options.turnImage) +'">');  

  // Set starting width and height of our turn-o-ma-bob  
  turn_object.css({  
  width: options.startingWidth,  
  height: options.startingHeight  
  });  
   
  // There are different CSS considerations for a top-right fold.  
  if (options.side == 'right') turn_wrapper.addClass('right');  
   
  // Rappin', I'm rappin' - I'm rap-rap-rappin'.  
  this.wrap(turn_wrapper).wrap(turn_object).after(img).wrap(turn_hideme);  
   
  // If you want autoCurl, you don't get scrolling. Why? Because it looks silly.  
   
  turn_wrapper = $('#turn_wrapper');  
  turn_object = $('#turn_object');  

  if (!options.autoCurl) {  
  // Hit 'em with the drag-stick because it ain't gonna curl itself!  
  turn_object.resizable({  
  maxHeight: options.maxHeight,  
  aspectRatio: true,  
  handles: options.side == 'left' ? 'se' : 'sw'  
  });  
  } else {  
  // Thanks to @zzzrByte for this bit!  
  turn_wrapper.hover(  
  function(){  
  turn_object.stop().animate({  
  width: options.maxHeight,  
  height: options.maxHeight  
  });  
  },  
  function(){  
  turn_object.stop().animate({  
  width: options.startingHeight,  
  height: options.startingHeight  
  });  
  }  
  );  
  }  
  };  
})(jQuery);

<script src="turn.js"></script>  
<script type="text/javascript">  
$(document).ready(function(){  
$('#target').fold();  
});  
</script>

<img src="code.png" id="target">

#noborder { border:none};  

#turn_wrapper {  
  width: 80px;  
  height: 80px;  
  display: block;  
  position: absolute;  
  top: 0;  
  left: 0;  
}  

#turn_hideme {  
  width: 85%;  
  height: 85%;  
  overflow: hidden;  
  display: block;  
  position: absolute;  
  float: left;  
  top: 0;  
  left: 0;  
  z-index: 1;  
}  

#turn_object{  
  position: relative;  
}  

#turn_wrapper.right #turn_hideme *,  
#turn_wrapper.right #turn_object {  
  float: right !important;  
}  

#turn_wrapper.right #turn_hideme {  
  float: right !important;  
  right: 0 !important;  
  left: auto;  
}  
#turn_wrapper.right #turn_object {  
  right: 0 !important;  
  left: auto !important;  
}  

#turn_wrapper.right {  
  position: absolute;  
  top: 0;  
  width: 100%;  
  height: 0;  
  right: 0 !important;  
}  

#turn_wrapper.right #turn_object * {  
  position: absolute;  
  right: 0 !important;  
}  

#turn_wrapper #turn_object img#turn_fold {  
  display: block;  
  width: 100%;  
  height: 100%;  
  z-index: 1000;  
  right: 0;  
  position: absolute;  
}  

/* the jQuery CSS Framework */  
#turn_wrapper .ui-resizable { position: relative;}  
#turn_wrapper .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; background-image: url(#none)}  
#turn_wrapper .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 0; bottom: 0; }  
#turn_wrapper .ui-resizable-sw { cursor: sw-resize; width: 12px; height: 12px; left: 0; bottom: 0; }