[Summary view] [Print] [Text view]

   1  .imgCrop_wrap {
   2      /* width: 500px;   @done_in_js */
   3      /* height: 375px;  @done_in_js */
   4      position: relative;
   5      cursor: crosshair;
   6  }
   7  
   8  /* an extra classname is applied for Opera < 9.0 to fix its lack of opacity support */
   9  .imgCrop_wrap.opera8 .imgCrop_overlay,
  10  .imgCrop_wrap.opera8 .imgCrop_clickArea { 
  11      background-color: transparent;
  12  }
  13  
  14  /* fix for IE displaying all boxes at line-height by default, although they are still 1 pixel high until we combine them with the pointless span */
  15  .imgCrop_wrap,
  16  .imgCrop_wrap * {
  17      font-size: 0;
  18  }
  19  
  20  .imgCrop_overlay {
  21      background-color: #000;
  22      opacity: 0.5;
  23      filter:alpha(opacity=50);
  24      position: absolute;
  25      width: 100%;
  26      height: 100%;
  27  }
  28  
  29  .imgCrop_selArea {
  30      position: absolute;
  31      /* @done_in_js 
  32      top: 20px;
  33      left: 20px;
  34      width: 200px;
  35      height: 200px;
  36      background: transparent url(castle.jpg) no-repeat  -210px -110px;
  37      */
  38      cursor: move;
  39      z-index: 2;
  40  }
  41  
  42  /* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */
  43  .imgCrop_clickArea {
  44      width: 100%;
  45      height: 100%;
  46      background-color: #FFF;
  47      opacity: 0.01;
  48      filter:alpha(opacity=01);
  49  }
  50  
  51  .imgCrop_marqueeHoriz {
  52      position: absolute;
  53      width: 100%;
  54      height: 1px;
  55      background: transparent url(marqueeHoriz.gif) repeat-x 0 0;
  56      z-index: 3;
  57  }
  58  
  59  .imgCrop_marqueeVert {
  60      position: absolute;
  61      height: 100%;
  62      width: 1px;
  63      background: transparent url(marqueeVert.gif) repeat-y 0 0;
  64      z-index: 3;
  65  }
  66  
  67  .imgCrop_marqueeNorth { top: 0; left: 0; }
  68  .imgCrop_marqueeEast  { top: 0; right: 0; }
  69  .imgCrop_marqueeSouth { bottom: 0px; left: 0; }
  70  .imgCrop_marqueeWest  { top: 0; left: 0; }
  71  
  72  
  73  .imgCrop_handle {
  74      position: absolute;
  75      border: 1px solid #333;
  76      width: 6px;
  77      height: 6px;
  78      background: #FFF;
  79      opacity: 0.5;
  80      filter:alpha(opacity=50);
  81      z-index: 4;
  82  }
  83  
  84  /* fix IE 5 box model */
  85  * html .imgCrop_handle {
  86      width: 8px;
  87      height: 8px;
  88      wid\th: 6px;
  89      hei\ght: 6px;
  90  }
  91  
  92  .imgCrop_handleN {
  93      top: -3px;
  94      left: 0;
  95      /* margin-left: 49%;    @done_in_js */
  96      cursor: n-resize;
  97  }
  98  
  99  .imgCrop_handleNE { 
 100      top: -3px;
 101      right: -3px;
 102      cursor: ne-resize;
 103  }
 104  
 105  .imgCrop_handleE {
 106      top: 0;
 107      right: -3px;
 108      /* margin-top: 49%;    @done_in_js */
 109      cursor: e-resize;
 110  }
 111  
 112  .imgCrop_handleSE {
 113      right: -3px;
 114      bottom: -3px;
 115      cursor: se-resize;
 116  }
 117  
 118  .imgCrop_handleS {
 119      right: 0;
 120      bottom: -3px;
 121      /* margin-right: 49%; @done_in_js */
 122      cursor: s-resize;
 123  }
 124  
 125  .imgCrop_handleSW {
 126      left: -3px;
 127      bottom: -3px;
 128      cursor: sw-resize;
 129  }
 130  
 131  .imgCrop_handleW {
 132      top: 0;
 133      left: -3px;
 134      /* margin-top: 49%;  @done_in_js */
 135      cursor: e-resize;
 136  }
 137  
 138  .imgCrop_handleNW {
 139      top: -3px;
 140      left: -3px;
 141      cursor: nw-resize;
 142  }
 143  
 144  /**
 145   * Create an area to click & drag around on as the default browser behaviour is to let you drag the image 
 146   */
 147  .imgCrop_dragArea {
 148      width: 100%;
 149      height: 100%;
 150      z-index: 200;
 151      position: absolute;
 152      top: 0;
 153      left: 0;
 154  }
 155  
 156  .imgCrop_previewWrap {
 157      /* width: 200px;  @done_in_js */
 158      /* height: 200px; @done_in_js */
 159      overflow: hidden;
 160      position: relative;
 161  }
 162  
 163  .imgCrop_previewWrap img {
 164      position: absolute;
 165  }