Friendica Communications Platform (please note that this is a clone of the repository at github, issues are handled there) https://friendi.ca
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

236 lines
5.5 KiB

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