Scrolling image effect using clip

**Helllllo** · 12-30-2007, 07:30 PM

Hi, I'm a bit stuck... I have this code:

HTML 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"

Thread: Scrolling image effect using clip

Thread Tools

Search Thread

Scrolling image effect using clip

Bookmarks

Bookmarks

Posting Permissions