PDA

View Full Version : Scrolling image effect using clip



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.

pman
12-31-2007, 10:06 PM
Can you explain a bit about the problem?

I sure you need to have the mousemove and mouseup events added to the "div" instead of the "body". Also, don't use "this" as an ID for your div. Use something more descriptive.

Never mind. Now I see why the events are added to the "body" instead of the "div"