Sliding a large image across the screen

How about something like this

http://manos.malihu.gr/tuts/jquery_image_panning.html

Well I would like to concentrate it to the buttons though. Maybe using a code like this.

 	function goRight() { 
	    document.images['ball1'].style.left = parseInt(document.images['ball1'].style.left)+2 +"px"; 
	} 
	function goLeft() { 
	 	document.images['ball1'].style.left = (parseInt(document.images['ball1'].style.left)-2) +"px"; 
 	} 
	

Select allOpen in new window

Than using a setInterval or something to use on a rollover and rollout. Any Ideas? Thanks.

So you want it to pan when you click the buttons or mouse over them?

mouseover would be preferred.

Ok, but do you want the scroll to happen with the mouse over or with a click?

when you rollover the buttons it should move and when you rollout it should stop.

greetings : CREATiVENESS, , I wasn't going to post here, but no one has offered any suggestions to "Move" your image. I do image animation all the time, and to me it is not difficult. You start by setting the image to an absolute position, If it is in a "Container" you MUST set the container to relative position, for this to work. Next set three variables, one to keep track of the changing position as posY , one to have the DOM of the image, and one to change the "Stop position" as imgStop .  In the function you add or subtract to the posY the number of pixels to move per frame, change the top or left or both of the style of the DOM image object domR ,  Be sure to stop the animation by testing for  "less than" or " greater than" the  imgStop value.  Some code below. If you have not done this sort of thing before, do NOT try first on your production page, try some animations on a "Test" page, with simple movements, to get a working knowledge of this method, then apply it to your large image. You can get the movement started with a onmouseover="moveit( )" for an image or container, you'll need to add a "stopIt" variable if you want to stop the animation with a onmouseout="stopIt( )"

<script>
var posY=-208;
var imgStop = -1;
var domR = document.getElementById("rocket1");

function soar2( ){
    posY+=4;
    domR.style.top=posY+'px';
    if (posY < imgStop) setTimeout("soar2( )",30);
    }
</script>
<img id="rocket1" src="rockt.jpg" width="240" height="75" style="position:absolute;top:-208px;right:16pxz-index:2;"/>

Select allOpen in new window

ask questions if you need more info

Any reason for the B rating ...?