Javascript-форум - Закрепление фотографии

я проше прощения но смысла печатать код нету, потому что там все работает корректно, а мне просто нужна отдельная функция как закрепить все глы фотографии но если нужно то вот код html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Index</title>
<script type = text/javascript>
</script>
</head>
<body>
<div id="outta">
<div id="photobox">
</div>
</div>
</body>
<script type="text/javascript">
function fixEvent(e) {
e = e || window.event;

if (e.pageX == null && e.clientX != null) {
var html = document.documentElement;
var body = document.body;
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
}
if (!e.which && e.button) {
e.which = e.button & 1 ? 1 : (e.button & 2 ? 3 : (e.button & 4 ? 2 : 0))
}
return e
}

function Resize(){
var dragObj = document.getElementById("photobox");
var mouseAnotherOffset = getMouseOffset(dragObj,e);
var newSize = document.getElementById("outta");
if (newSize != null) {
newSize.style.width = document.documentElement.clientWidth;
newSize.style.height = document.documentElement.clientHeight;
}
if ((mouseAnotherOffset.x + document.documentElement.clientWidth - e.pageX) > 2304) {
with (dragObj.style){
left = 2304 - document.documentElement.clientWidth + 'px';
}
}
}

function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;

return {x:left, y:top};
}

function getMouseOffset(targ,e) {
var photoPos = getPosition(targ);
return {x:e.pageX -photoPos.x, y:e.pageY - photoPos.y}
}

function onMouseUp(e) {
dragObj = null;
document.onmousemove = null;
document.onmouseup = null;
}

function onMouseMove(e) {
e = fixEvent(e);
with (dragObj.style) {
position = 'absolute';
}
if(!((mouseOffset.x + document.documentElement.clientWidth - e.pageX) > 2304 ||
(mouseOffset.x - e.pageX) < 0)){
with (dragObj.style) {
left = e.pageX - mouseOffset.x + 'px';
}
}
if(!((mouseOffset.y + document.documentElement.clientHeight - e.pageY) > 1728 ||
(mouseOffset.y - e.pageY < 0 ))){
with(dragObj.style) {
top = e.pageY - mouseOffset.y + 'px';
}
}
return false;
}

function onMouseDown(e) {
e = fixEvent(e);
if (e.which!=1){return}
dragObj = this;
mouseOffset = getMouseOffset(this,e);
document.onmousemove = onMouseMove;
document.onmouseup = onMouseUp;
}
</script>
<script type ="text/javascript">
onload = function() {
document.getElementById('photobox').onmousedown = onMouseDown;
return false;
}
</script>

<script type="text/javascript">
window.onresize = function(){
Resize()
}
</script>

</html>

а вот css

html {
overflow:hidden;
}
#photobox{
position:relative;
top:0px;
left:0px;
height:1728px;
width:2304px;
background:url(photo.jpg) 0px 0px;
z-index:1;
border: 2px groove #000000;
}

#outta{
position:relative;
width:1010px;
height:730px;
padding-left:0;
margin-left:0;
}

реализовывал перемещение по фото при помощи мыши с помощью драгндропа, помогите плз, я тока начал в этом всем разбираться((