Spaces:
Sleeping
Sleeping
.imgCrop_wrap { | |
/* width: 500px; @done_in_js */ | |
/* height: 375px; @done_in_js */ | |
position: relative; | |
cursor: crosshair; | |
} | |
/* an extra classname is applied for Opera < 9.0 to fix its lack of opacity support */ | |
.imgCrop_wrap.opera8 .imgCrop_overlay, | |
.imgCrop_wrap.opera8 .imgCrop_clickArea { | |
background-color: transparent; | |
} | |
/* 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 */ | |
.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; | |
/* @done_in_js | |
top: 20px; | |
left: 20px; | |
width: 200px; | |
height: 200px; | |
background: transparent url(castle.jpg) no-repeat -210px -110px; | |
*/ | |
cursor: move; | |
z-index: 2; | |
} | |
/* 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; | |
z-index: 3; | |
} | |
.imgCrop_marqueeVert { | |
position: absolute; | |
height: 100%; | |
width: 1px; | |
background: transparent url(marqueeVert.gif) repeat-y 0 0; | |
z-index: 3; | |
} | |
.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: 4; | |
} | |
/* fix IE 5 box model */ | |
* html .imgCrop_handle { | |
width: 8px; | |
height: 8px; | |
wid\th: 6px; | |
hei\ght: 6px; | |
} | |
.imgCrop_handleN { | |
top: -3px; | |
left: 0; | |
/* margin-left: 49%; @done_in_js */ | |
cursor: n-resize; | |
} | |
.imgCrop_handleNE { | |
top: -3px; | |
right: -3px; | |
cursor: ne-resize; | |
} | |
.imgCrop_handleE { | |
top: 0; | |
right: -3px; | |
/* margin-top: 49%; @done_in_js */ | |
cursor: e-resize; | |
} | |
.imgCrop_handleSE { | |
right: -3px; | |
bottom: -3px; | |
cursor: se-resize; | |
} | |
.imgCrop_handleS { | |
right: 0; | |
bottom: -3px; | |
/* margin-right: 49%; @done_in_js */ | |
cursor: s-resize; | |
} | |
.imgCrop_handleSW { | |
left: -3px; | |
bottom: -3px; | |
cursor: sw-resize; | |
} | |
.imgCrop_handleW { | |
top: 0; | |
left: -3px; | |
/* margin-top: 49%; @done_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; @done_in_js */ | |
/* height: 200px; @done_in_js */ | |
overflow: hidden; | |
position: relative; | |
} | |
.imgCrop_previewWrap img { | |
position: absolute; | |
} |