Static-test-for-Image-Cropper


            



  
  
  


    
      
    .imgCrop_wrap {
      width: 500px;   /* @TODO IN JS */
      height: 333px;  /* @TODO IN JS */
      position: relative;
      cursor: crosshair;
    }
    
    /* fix for IE displaying all boxes at line-height by default */
    .imgCrop_wrap,
    .imgCrop_wrap * {
      font-size: 0;
    }
    
    .imgCrop_overlay {
      background-color: #000;
      opacity: 0.5;
      filter:alpha(opacity=50);
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .imgCrop_selArea {
      position: absolute;
      cursor: move;
      /* @TODO: rest to be done via JS when selecting areas */
      top: 110px;
      left: 210px;
      width: 200px;
      height: 200px;
      z-index: 2;
      background: transparent url(castle.jpg) no-repeat  -210px -110px;
    }
    
    /* imgCrop_clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */
    .imgCrop_clickArea {
      width: 100%;
      height: 100%;
      background-color: #FFF;
      opacity: 0.01;
      filter:alpha(opacity=01);
    }
        
    .imgCrop_marqueeHoriz {
      position: absolute;
      width: 100%;
      height: 1px;
      background: transparent url(marqueeHoriz.gif) repeat-x 0 0;
    }
    
    .imgCrop_marqueeVert {
      position: absolute;
      height: 100%;
      width: 1px;
      background: transparent url(marqueeVert.gif) repeat-y 0 0;
    }
        
    .imgCrop_marqueeNorth { top: 0; left: 0; }
    .imgCrop_marqueeEast  { top: 0; right: 0; }
    .imgCrop_marqueeSouth { bottom: 0px; left: 0; }
    .imgCrop_marqueeWest  { top: 0; left: 0; }
    
    
    .imgCrop_handle {
      position: absolute;
      border: 1px solid #333;
      width: 6px;
      height: 6px;
      background: #FFF;
      opacity: 0.5;
      filter:alpha(opacity=50);
      z-index: 3;
    }
    
    .imgCrop_handleN {
      top: -3px;
      left: 0;
      margin-left: 49%;    /* @TODO : in JS */
      cursor: n-resize;
    }
    
    .imgCrop_handleNE { 
      top: -3px;
      right: -3px;
      cursor: ne-resize;
    }
    
    .imgCrop_handleE {
      top: 0;
      right: -3px;
      margin-top: 49%;    /* @TODO : in JS */
      cursor: e-resize;
    }
    
    .imgCrop_handleSE {
      right: -3px;
      bottom: -3px;
      cursor: se-resize;
    }
    
    .imgCrop_handleS {
      right: 0;
      bottom: -3px;
      margin-right: 49%; /* @TODO : in JS */
      cursor: s-resize;
    }
    
    .imgCrop_handleSW {
      left: -3px;
      bottom: -3px;
      cursor: sw-resize;
    }
    
    .imgCrop_handleW {
      top: 0;
      left: -3px;
      margin-top: 49%;  /* @TODO : in JS */
      cursor: e-resize;
    }
    
    .imgCrop_handleNW {
      top: -3px;
      left: -3px;
      cursor: nw-resize;
    }
    
    /**
     * Create an area to click & drag around on as the default browser behaviour is to let you drag the image 
     */
    .imgCrop_dragArea {
      width: 100%;
      height: 100%;
      z-index: 200;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    
    .imgCrop_previewWrap {
      width: 200px;  /* @TODO : in JS */
      height: 200px; /* @TODO : in JS */
      overflow: hidden;
      position: relative;
    }
    
    /* @TODO : all in JS */
    .imgCrop_previewWrap img {
      position: absolute;
      width: 500px;
      height: 333px;
      left: -210px;
      top: -110px;
    }
    
    /**
     * These are just for the static test
     */
    .imgCrop_wrap {
      margin: 20px 0 0 50px;
      float: left;
    }
    
    #previewWrapper {
      float: left;
      margin-left: 20px;
    }
Page Components JavaScript DHTML

Preview:
