diff options
Diffstat (limited to 'library/cropper/tests/staticHTMLStructure.htm')
| -rw-r--r-- | library/cropper/tests/staticHTMLStructure.htm | 236 |
1 files changed, 236 insertions, 0 deletions
diff --git a/library/cropper/tests/staticHTMLStructure.htm b/library/cropper/tests/staticHTMLStructure.htm new file mode 100644 index 000000000..ddb99278e --- /dev/null +++ b/library/cropper/tests/staticHTMLStructure.htm @@ -0,0 +1,236 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="Content-Language" content="en-us" />
+ <title></title>
+</head>
+<body>
+ <!--
+
+ This is a static test file for the HTML & CSS structure employed, tested in
+ the following browsers:
+
+ PC:
+ IE 6: working
+ IE 5.5: working
+ IE 5.0: opacity issues
+ FF 1.5: working
+ Opera 9: working
+ MAC:
+ Camino 1.0: working
+ FF 1.5: working
+ Safari 2.0: working
+
+ -->
+ <style type="text/css">
+ .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;
+ }
+
+
+ </style>
+
+ <br /><br />
+
+ <!-- This is all attached to the image dynamically -->
+ <div class="imgCrop_wrap">
+ <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
+ <div class="imgCrop_dragArea">
+ <div class="imgCrop_overlay"></div>
+ <div class="imgCrop_selArea">
+ <!-- marquees -->
+ <!-- the inner spans are only required for IE to stop it making the divs 1px high/wide -->
+ <div class="imgCrop_marqueeHoriz imgCrop_marqueeNorth"><span></span></div>
+ <div class="imgCrop_marqueeVert imgCrop_marqueeEast"><span></span></div>
+ <div class="imgCrop_marqueeHoriz imgCrop_marqueeSouth"><span></span></div>
+ <div class="imgCrop_marqueeVert imgCrop_marqueeWest"><span></span></div>
+ <!-- handles -->
+ <div class="imgCrop_handle imgCrop_handleN"></div>
+ <div class="imgCrop_handle imgCrop_handleNE"></div>
+ <div class="imgCrop_handle imgCrop_handleE"></div>
+ <div class="imgCrop_handle imgCrop_handleSE"></div>
+ <div class="imgCrop_handle imgCrop_handleS"></div>
+ <div class="imgCrop_handle imgCrop_handleSW"></div>
+ <div class="imgCrop_handle imgCrop_handleW"></div>
+ <div class="imgCrop_handle imgCrop_handleNW"></div>
+ <div class="imgCrop_clickArea"></div>
+ </div>
+ <div class="imgCrop_clickArea"></div>
+ </div>
+ </div>
+
+ <div id="previewWrapper">
+ <h3>Preview:</h3>
+ <div class="imgCrop_previewWrap">
+ <img src="castle.jpg" alt="test image" id="previewImage" />
+ </div>
+ </div>
+</body>
+</html>
+
+
|