auto crop picture

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <title>Test Page</title>
  11. <style type="text/css">
  12. /* <![CDATA[ */
  13. div {
  14. border : none;
  15. margin-top : 1em;
  16. padding : 0%; }
  17. div#myDiv {
  18. margin-top : 1em;
  19. width : 300px;
  20. height : 300px; }
  21. /* ]]> */
  22. </style>
  23. <script type="text/javascript">
  24. // <![CDATA[
  25. var crop;
  26. crop = function( img, div, x, y ) {
  27. try {
  28. div = (( document.getElementById ) ? document.getElementById( div ) : document.images[ div ] );
  29. img = (( document.getElementById ) ? document.getElementById( img ) : document.images[ img ] );
  30. if ( arguments.length <= 4 ) {
  31. try {
  32. div.style.border = "thin dashed #000";
  33. div.style.width = x;
  34. div.style.height = y;
  35. div.style.background = "transparent url(" + img.src + ") no-repeat center left";
  36. (( img.style.display !== "none" ) ? img.style.display = "none" : img.style.display = "block" );
  37. } catch( e0 ) { }
  38. } else {
  39. throw "error";
  40. }
  41. } catch( e ) { (( e === "error" ) ? alert( "Missing argument's!" ) : alert( e.message ));
  42. }
  43. };
  44. // ]]>
  45. </script>
  46. </head>
  47. <body>
  48. <div id="myDiv">
  49. <h3 style="color : #f00; text-align : center;">Click Image!</h3><img id="image1" src="./image1.jpg" alt="image1.jpg" onclick="crop( 'image1', 'myDiv', '100px', '100px');" />
  50. </div>
  51. <h4>INSTRUCTION:</h4>
  52. <p>
  53. <em><b>SYNTAX—</b>
  54. <code>crop( [ img, [ div, [ x, [ y ] ] ] ] );</code></em></p>
  55. <p style="color:#190">
  56. The <samp>crop()</samp> function comes in 4 parameters:
  57. </p>
  58. <b><em>PARAMETERS —</em></b>
  59. <ol style="line-height: 1.6">
  60. <li><span style="color:#800000">img ~</span> Image id</li>
  61. <li><span style="color:#800000">div ~</span> Id of the element that hold's your image.</li>
  62. <li><span style="color:#800000">x ~</span> Xpos</li>
  63. <li><span style="color:#800000">y ~</span> Ypos</li>
  64. </ol>
  65. </body>
  66. </html>
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s