You can scroll an image by placing it in an "inner" DIV that is visible as the contents of an "outer" DIV. Note that the outer DIV has its overflow styled as hidden. The image appears to move by changing its left coordinate.

<style type="text/css">
#outerDiv {
    height: 370px;
    width: 600px;
    border: 1px solid black; 
    /* The overflow is not visible */ 
    overflow: hidden;
}
#innerDiv {
    position: relative; 
    left: 0px;
    top: 0px;
}
</style>

<script type="text/javascript">

	var rightScroll = 0;
	var leftScroll = 0;

	function stripPx(value) {
		if (value == "") return 0;
		return parseFloat(value.substring(0, value.length - 2));
	}

	function goRight()
	{
		leftScroll = window.clearInterval(leftScroll);
		leftScroll = 0;
        	rightScroll = window.clearInterval(rightScroll);
        	rightScroll = 0;
		rightScroll = window.setInterval( "doSomethingRight()", 100 );
	}
	
	function goLeft()
	{
		rightScroll = window.clearInterval(rightScroll);
		rightScroll = 0;
        	leftScroll = window.clearInterval(leftScroll);
        	leftScroll = 0;
		leftScroll = window.setInterval ( "doSomethingLeft()", 100 );
	}
	
	function doSomethingRight()
	{		
		var innerDiv = document.getElementById("innerDiv");
		var myLeft = stripPx(innerDiv.style.left);
		if (myLeft > -2560)
		{
		  innerDiv.style.left = myLeft - 20;
		}
	}

	function doSomethingLeft()
	{		
		var innerDiv = document.getElementById("innerDiv");
		var myLeft = stripPx(innerDiv.style.left);
		if (myLeft < 0)
		{
			innerDiv.style.left = myLeft + 20;
		}
	}
		
</script>

...

<div id="outerDiv">       
    <div id="innerDiv">
      <img id="snowWhite" src="picture.jpg">
    </div>
</div>
<input type="button" value="Go Right" onclick="goRight()">
<input type="button" value="Go Left" onclick="goLeft()">