library/cropper/tests/staticHTMLStructure.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
   3 <head>\r
   4         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />\r
   5         <meta http-equiv="Content-Language" content="en-us" />\r
   6         <title></title>\r
   7 </head>\r
   8 <body>\r
   9         <!--\r
  10                 \r
  11                 This is a static test file for the HTML & CSS structure employed, tested in \r
  12                 the following browsers:\r
  13                 \r
  14                         PC:\r
  15                                 IE 6:          working\r
  16                                 IE 5.5:        working\r
  17                                 IE 5.0:        opacity issues\r
  18                                 FF 1.5:        working\r
  19                                 Opera 9:       working\r
  20                         MAC:\r
  21                                 Camino 1.0:    working\r
  22                                 FF 1.5:        working\r
  23                                 Safari 2.0:    working\r
  24                                 \r
  25         -->     \r
  26         <style type="text/css">         \r
  27                 .imgCrop_wrap {\r
  28                         width: 500px;   /* @TODO IN JS */\r
  29                         height: 333px;  /* @TODO IN JS */\r
  30                         position: relative;\r
  31                         cursor: crosshair;\r
  32                 }\r
  33                 \r
  34                 /* fix for IE displaying all boxes at line-height by default */\r
  35                 .imgCrop_wrap,\r
  36                 .imgCrop_wrap * {\r
  37                         font-size: 0;\r
  38                 }\r
  39                 \r
  40                 .imgCrop_overlay {\r
  41                         background-color: #000;\r
  42                         opacity: 0.5;\r
  43                         filter:alpha(opacity=50);\r
  44                         position: absolute;\r
  45                         width: 100%;\r
  46                         height: 100%;\r
  47                 }\r
  48                 \r
  49                 .imgCrop_selArea {\r
  50                         position: absolute;\r
  51                         cursor: move;\r
  52                         /* @TODO: rest to be done via JS when selecting areas */\r
  53                         top: 110px;\r
  54                         left: 210px;\r
  55                         width: 200px;\r
  56                         height: 200px;\r
  57                         z-index: 2;\r
  58                         background: transparent url(castle.jpg) no-repeat  -210px -110px;\r
  59                 }\r
  60                 \r
  61                 /* imgCrop_clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */\r
  62                 .imgCrop_clickArea {\r
  63                         width: 100%;\r
  64                         height: 100%;\r
  65                         background-color: #FFF;\r
  66                         opacity: 0.01;\r
  67                         filter:alpha(opacity=01);\r
  68                 }\r
  69                                 \r
  70                 .imgCrop_marqueeHoriz {\r
  71                         position: absolute;\r
  72                         width: 100%;\r
  73                         height: 1px;\r
  74                         background: transparent url(marqueeHoriz.gif) repeat-x 0 0;\r
  75                 }\r
  76                 \r
  77                 .imgCrop_marqueeVert {\r
  78                         position: absolute;\r
  79                         height: 100%;\r
  80                         width: 1px;\r
  81                         background: transparent url(marqueeVert.gif) repeat-y 0 0;\r
  82                 }\r
  83                                 \r
  84                 .imgCrop_marqueeNorth { top: 0; left: 0; }\r
  85                 .imgCrop_marqueeEast  { top: 0; right: 0; }\r
  86                 .imgCrop_marqueeSouth { bottom: 0px; left: 0; }\r
  87                 .imgCrop_marqueeWest  { top: 0; left: 0; }\r
  88                 \r
  89                 \r
  90                 .imgCrop_handle {\r
  91                         position: absolute;\r
  92                         border: 1px solid #333;\r
  93                         width: 6px;\r
  94                         height: 6px;\r
  95                         background: #FFF;\r
  96                         opacity: 0.5;\r
  97                         filter:alpha(opacity=50);\r
  98                         z-index: 3;\r
  99                 }\r
 100                 \r
 101                 .imgCrop_handleN {\r
 102                         top: -3px;\r
 103                         left: 0;\r
 104                         margin-left: 49%;    /* @TODO : in JS */\r
 105                         cursor: n-resize;\r
 106                 }\r
 107                 \r
 108                 .imgCrop_handleNE { \r
 109                         top: -3px;\r
 110                         right: -3px;\r
 111                         cursor: ne-resize;\r
 112                 }\r
 113                 \r
 114                 .imgCrop_handleE {\r
 115                         top: 0;\r
 116                         right: -3px;\r
 117                         margin-top: 49%;    /* @TODO : in JS */\r
 118                         cursor: e-resize;\r
 119                 }\r
 120                 \r
 121                 .imgCrop_handleSE {\r
 122                         right: -3px;\r
 123                         bottom: -3px;\r
 124                         cursor: se-resize;\r
 125                 }\r
 126                 \r
 127                 .imgCrop_handleS {\r
 128                         right: 0;\r
 129                         bottom: -3px;\r
 130                         margin-right: 49%; /* @TODO : in JS */\r
 131                         cursor: s-resize;\r
 132                 }\r
 133                 \r
 134                 .imgCrop_handleSW {\r
 135                         left: -3px;\r
 136                         bottom: -3px;\r
 137                         cursor: sw-resize;\r
 138                 }\r
 139                 \r
 140                 .imgCrop_handleW {\r
 141                         top: 0;\r
 142                         left: -3px;\r
 143                         margin-top: 49%;  /* @TODO : in JS */\r
 144                         cursor: e-resize;\r
 145                 }\r
 146                 \r
 147                 .imgCrop_handleNW {\r
 148                         top: -3px;\r
 149                         left: -3px;\r
 150                         cursor: nw-resize;\r
 151                 }\r
 152                 \r
 153                 /**\r
 154                  * Create an area to click & drag around on as the default browser behaviour is to let you drag the image \r
 155                  */\r
 156                 .imgCrop_dragArea {\r
 157                         width: 100%;\r
 158                         height: 100%;\r
 159                         z-index: 200;\r
 160                         position: absolute;\r
 161                         top: 0;\r
 162                         left: 0;\r
 163                 }\r
 164                 \r
 165                 \r
 166                 .imgCrop_previewWrap {\r
 167                         width: 200px;  /* @TODO : in JS */\r
 168                         height: 200px; /* @TODO : in JS */\r
 169                         overflow: hidden;\r
 170                         position: relative;\r
 171                 }\r
 172                 \r
 173                 /* @TODO : all in JS */\r
 174                 .imgCrop_previewWrap img {\r
 175                         position: absolute;\r
 176                         width: 500px;\r
 177                         height: 333px;\r
 178                         left: -210px;\r
 179                         top: -110px;\r
 180                 }\r
 181                 \r
 182                 /**\r
 183                  * These are just for the static test\r
 184                  */\r
 185                 .imgCrop_wrap {\r
 186                         margin: 20px 0 0 50px;\r
 187                         float: left;\r
 188                 }\r
 189                 \r
 190                 #previewWrapper {\r
 191                         float: left;\r
 192                         margin-left: 20px;\r
 193                 }\r
 194                 \r
 195                         \r
 196         </style>\r
 197         \r
 198         <br /><br />\r
 199         \r
 200         <!-- This is all attached to the image dynamically -->\r
 201         <div class="imgCrop_wrap">\r
 202                 <img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />\r
 203                 <div class="imgCrop_dragArea">\r
 204                         <div class="imgCrop_overlay"></div>\r
 205                         <div class="imgCrop_selArea">\r
 206                                 <!-- marquees -->\r
 207                                 <!-- the inner spans are only required for IE to stop it making the divs 1px high/wide -->\r
 208                                 <div class="imgCrop_marqueeHoriz imgCrop_marqueeNorth"><span></span></div>\r
 209                                 <div class="imgCrop_marqueeVert imgCrop_marqueeEast"><span></span></div>\r
 210                                 <div class="imgCrop_marqueeHoriz imgCrop_marqueeSouth"><span></span></div>\r
 211                                 <div class="imgCrop_marqueeVert imgCrop_marqueeWest"><span></span></div>                        \r
 212                                 <!-- handles -->\r
 213                                 <div class="imgCrop_handle imgCrop_handleN"></div>\r
 214                                 <div class="imgCrop_handle imgCrop_handleNE"></div>\r
 215                                 <div class="imgCrop_handle imgCrop_handleE"></div>\r
 216                                 <div class="imgCrop_handle imgCrop_handleSE"></div>\r
 217                                 <div class="imgCrop_handle imgCrop_handleS"></div>\r
 218                                 <div class="imgCrop_handle imgCrop_handleSW"></div>\r
 219                                 <div class="imgCrop_handle imgCrop_handleW"></div>\r
 220                                 <div class="imgCrop_handle imgCrop_handleNW"></div>\r
 221                                 <div class="imgCrop_clickArea"></div>\r
 222                         </div>  \r
 223                         <div class="imgCrop_clickArea"></div>   \r
 224                 </div>  \r
 225         </div>\r
 226         \r
 227         <div id="previewWrapper">\r
 228                 <h3>Preview:</h3>\r
 229                 <div class="imgCrop_previewWrap">\r
 230                         <img src="castle.jpg" alt="test image" id="previewImage" />\r
 231                 </div>\r
 232         </div>\r
 233 </body>\r
 234 </html>\r
 235 \r
 236 \r