1.imgCrop_wrap { 2 position: relative; 3 cursor: crosshair; 4 margin: auto; 5} 6 7/* an extra classname is applied for Opera < 9.0 to fix it's lack of opacity support */ 8.imgCrop_wrap.opera8 .imgCrop_overlay, 9.imgCrop_wrap.opera8 .imgCrop_clickArea { 10 background-color: transparent; 11} 12 13/* 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 */ 14.imgCrop_wrap, 15.imgCrop_wrap * { 16 font-size: 0; 17} 18 19.imgCrop_overlay { 20 background-color: #000; 21 opacity: 0.5; 22 filter:alpha(opacity=50); 23 position: absolute; 24 width: 100%; 25 height: 100%; 26} 27 28.imgCrop_selArea { 29 position: absolute; 30 cursor: move; 31 z-index: 2; 32} 33 34/* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */ 35.imgCrop_clickArea { 36 width: 100%; 37 height: 100%; 38 background-color: #FFF; 39 opacity: 0.01; 40 filter:alpha(opacity=01); 41} 42 43.imgCrop_marqueeHoriz { 44 position: absolute; 45 width: 100%; 46 height: 1px; 47 background: transparent url('graphics/marqueeHoriz.gif') repeat-x 0 0; 48 z-index: 3; 49} 50 51.imgCrop_marqueeVert { 52 position: absolute; 53 height: 100%; 54 width: 1px; 55 background: transparent url('graphics/marqueeVert.gif') repeat-y 0 0; 56 z-index: 3; 57} 58 59/* 60 * FIX MARCHING ANTS IN IE 61 * As IE <6 tries to load background images we can uncomment the follwoing hack 62 * to remove that issue, not as pretty - but is anything in IE? 63 * And yes I do know that 'filter' is evil, but it will make it look semi decent in IE 64 * 65* html .imgCrop_marqueeHoriz, 66* html .imgCrop_marqueeVert { 67 background: transparent; 68 filter: Invert; 69} 70* html .imgCrop_marqueeNorth { border-top: 1px dashed #000; } 71* html .imgCrop_marqueeEast { border-right: 1px dashed #000; } 72* html .imgCrop_marqueeSouth { border-bottom: 1px dashed #000; } 73* html .imgCrop_marqueeWest { border-left: 1px dashed #000; } 74*/ 75 76.imgCrop_marqueeNorth { top: 0; left: 0; } 77.imgCrop_marqueeEast { top: 0; right: 0; } 78.imgCrop_marqueeSouth { bottom: 0px; left: 0; } 79.imgCrop_marqueeWest { top: 0; left: 0; } 80 81 82.imgCrop_handle { 83 position: absolute; 84 border: 1px solid #333; 85 width: 6px; 86 height: 6px; 87 background: #FFF; 88 opacity: 0.5; 89 filter:alpha(opacity=50); 90 z-index: 4; 91} 92 93/* fix IE 5 box model */ 94* html .imgCrop_handle { 95 width: 8px; 96 height: 8px; 97 wid\th: 6px; 98 hei\ght: 6px; 99} 100 101.imgCrop_handleN { 102 top: -3px; 103 left: 0; 104 /* margin-left: 49%; @done_in_js */ 105 cursor: n-resize; 106} 107 108.imgCrop_handleNE { 109 top: -3px; 110 right: -3px; 111 cursor: ne-resize; 112} 113 114.imgCrop_handleE { 115 top: 0; 116 right: -3px; 117 /* margin-top: 49%; @done_in_js */ 118 cursor: e-resize; 119} 120 121.imgCrop_handleSE { 122 right: -3px; 123 bottom: -3px; 124 cursor: se-resize; 125} 126 127.imgCrop_handleS { 128 right: 0; 129 bottom: -3px; 130 /* margin-right: 49%; @done_in_js */ 131 cursor: s-resize; 132} 133 134.imgCrop_handleSW { 135 left: -3px; 136 bottom: -3px; 137 cursor: sw-resize; 138} 139 140.imgCrop_handleW { 141 top: 0; 142 left: -3px; 143 /* margin-top: 49%; @done_in_js */ 144 cursor: w-resize; 145} 146 147.imgCrop_handleNW { 148 top: -3px; 149 left: -3px; 150 cursor: nw-resize; 151} 152 153/** 154 * Create an area to click & drag around on as the default browser behaviour is to let you drag the image 155 */ 156.imgCrop_dragArea { 157 width: 100%; 158 height: 100%; 159 z-index: 200; 160 position: absolute; 161 top: 0; 162 left: 0; 163} 164 165.imgCrop_previewWrap { 166 /* width: 200px; @done_in_js */ 167 /* height: 200px; @done_in_js */ 168 overflow: hidden; 169 position: relative; 170} 171 172.imgCrop_previewWrap img { 173 position: absolute; 174}