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
4 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
\r
5 <meta http-equiv="Content-Language" content="en-us" />
\r
11 This is a static test file for the HTML & CSS structure employed, tested in
\r
12 the following browsers:
\r
17 IE 5.0: opacity issues
\r
26 <style type="text/css">
\r
28 width: 500px; /* @TODO IN JS */
\r
29 height: 333px; /* @TODO IN JS */
\r
34 /* fix for IE displaying all boxes at line-height by default */
\r
41 background-color: #000;
\r
43 filter:alpha(opacity=50);
\r
52 /* @TODO: rest to be done via JS when selecting areas */
\r
58 background: transparent url(castle.jpg) no-repeat -210px -110px;
\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
65 background-color: #FFF;
\r
67 filter:alpha(opacity=01);
\r
70 .imgCrop_marqueeHoriz {
\r
74 background: transparent url(marqueeHoriz.gif) repeat-x 0 0;
\r
77 .imgCrop_marqueeVert {
\r
81 background: transparent url(marqueeVert.gif) repeat-y 0 0;
\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
92 border: 1px solid #333;
\r
97 filter:alpha(opacity=50);
\r
104 margin-left: 49%; /* @TODO : in JS */
\r
108 .imgCrop_handleNE {
\r
117 margin-top: 49%; /* @TODO : in JS */
\r
121 .imgCrop_handleSE {
\r
130 margin-right: 49%; /* @TODO : in JS */
\r
134 .imgCrop_handleSW {
\r
143 margin-top: 49%; /* @TODO : in JS */
\r
147 .imgCrop_handleNW {
\r
154 * Create an area to click & drag around on as the default browser behaviour is to let you drag the image
\r
156 .imgCrop_dragArea {
\r
160 position: absolute;
\r
166 .imgCrop_previewWrap {
\r
167 width: 200px; /* @TODO : in JS */
\r
168 height: 200px; /* @TODO : in JS */
\r
170 position: relative;
\r
173 /* @TODO : all in JS */
\r
174 .imgCrop_previewWrap img {
\r
175 position: absolute;
\r
183 * These are just for the static test
\r
186 margin: 20px 0 0 50px;
\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
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
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
223 <div class="imgCrop_clickArea"></div>
\r
227 <div id="previewWrapper">
\r
229 <div class="imgCrop_previewWrap">
\r
230 <img src="castle.jpg" alt="test image" id="previewImage" />
\r