<!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>