<div id="borderBox" style="position:relative;border:1px solid black;width:600px;height:400px;overflow:hidden;">
<img id="dragableElement" src="mylargeimage.jpg"
style="width:3000px;height:2000px;top:0px;left:0px;position:absolute;cursor:move;"/>
</div>
<script type="text/javascript">
var el = document.getElementById('dragableElement');
var leftEdge = el.parentNode.clientWidth - el.clientWidth;
var topEdge = el.parentNode.clientHeight - el.clientHeight;
var dragObj = new dragObject(el, null, new Position(leftEdge, topEdge), new Position(0, 0));
</script>
Add this code to the Body HTML of a HTML box.
Adjust the height and width of the borderbox and img to your needs. Also adjust the image src to your image location.
Back to Progrower.coffeecup.com
<script type="text/javascript" src="javascript.js"></script>
Add this code to the Header HTML of the HTML box.
Now add the large image you want to use to the root of your site using the Add files tool. If you name it mylargeimage.jpg you won't have to change the code in the first step. otherwise adjust the src to your actual image name. Next right click on the link below for the javascript.js and select save as and add the .js file to the root of your site.
Draggable divide for oversized images
Step 1
Step 2
Step 3
Add the needed files