Helllllo
12-30-2007, 07:30 PM
Hi, I'm a bit stuck... I have this code:
<html>
<head>
<style type="text/css">
div#this{
width:429px;
height:300px;
background: transparent url(../images/some_image_which_is_429x1036.gif) no-repeat scroll 1px -1px;
}
</style>
<script type="text/javascript">
var curHeight=0
var curPos=0
var newPos=0
var mouseStatus='up'
function setPos(e){
curevent=(typeof event=='undefined'?e:event);
mouseStatus='down';
curPos=curevent.clientY;
tempHeight=document.getElementById('this').style.backgroundPosition;
tempHeight2=tempHeight.split(' ');
heightArray1=parseInt(tempHeight2[1]);
heightArray2=heightArray1.split('p');
curHeight=parseInt(heightArray2[0]);
}
function getPos(e){
if(mouseStatus=='down'){
//document.body.style.cursor="-moz-grabbing";
curevent=(typeof event=='undefined'?e:event);
newPos=curevent.clientY;
var pxMove=parseInt(newPos-curPos);
var newHeight=parseInt(curHeight+pxMove);
newHeight=(newHeight<0?0:newHeight)
newHeight=(newHeight>1036?1036:newHeight)
document.getElementById('this').style.backgroundPosition='1px -'+newHeight+'px';
}
}
</script>
</head>
<body onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<div id="this" onmousedown="setPos(event)"></div>
</body>
</html>
I want it so that when the user clicks the div and drags up/down the background images appears to move up/down. Can someone help me with this? I have been trying for ages and I'm bad at coding. Thanks.
<html>
<head>
<style type="text/css">
div#this{
width:429px;
height:300px;
background: transparent url(../images/some_image_which_is_429x1036.gif) no-repeat scroll 1px -1px;
}
</style>
<script type="text/javascript">
var curHeight=0
var curPos=0
var newPos=0
var mouseStatus='up'
function setPos(e){
curevent=(typeof event=='undefined'?e:event);
mouseStatus='down';
curPos=curevent.clientY;
tempHeight=document.getElementById('this').style.backgroundPosition;
tempHeight2=tempHeight.split(' ');
heightArray1=parseInt(tempHeight2[1]);
heightArray2=heightArray1.split('p');
curHeight=parseInt(heightArray2[0]);
}
function getPos(e){
if(mouseStatus=='down'){
//document.body.style.cursor="-moz-grabbing";
curevent=(typeof event=='undefined'?e:event);
newPos=curevent.clientY;
var pxMove=parseInt(newPos-curPos);
var newHeight=parseInt(curHeight+pxMove);
newHeight=(newHeight<0?0:newHeight)
newHeight=(newHeight>1036?1036:newHeight)
document.getElementById('this').style.backgroundPosition='1px -'+newHeight+'px';
}
}
</script>
</head>
<body onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<div id="this" onmousedown="setPos(event)"></div>
</body>
</html>
I want it so that when the user clicks the div and drags up/down the background images appears to move up/down. Can someone help me with this? I have been trying for ages and I'm bad at coding. Thanks.