Very fast image change: jquery or movie maker?

[Violet_82]

Hi guys, I would like to add sth to my website but I am not sure what's the best way to achieve this. It is a kind of image gallery, say I have 10-20 images and I want to display all of them one after another one from the beginning to the end and then going back. So, let's take the 5 attached images: as you can see they have been taken in sequence so what I have in mind is to have a page where you can see only pic 87: you click a button sayin probably "run sequence" and from pic 87 goes very very quickly all the way to pic 91 so the effect is almost like a video and then straight away goes back to 87, so you get a rewind effect.
Now I am not sure whether it is a good idea to achieve this with css and jquery or somehow record a video perhaps with moviemaker to get that effect. I guess the video has the advantage of being played with every browser whereas the script requires more adjustements.

I haven't written any code yet but I think each picture can have a different z-index and with jquery I can change the order when I click the "run sequence" button, i will figure out how hopefully
thanks

[Ritesh_4]

jquery could be good, but I think flash is more appropriate here as your transitions would be in milliseconds, and flash rendering is more suited than jquery i think in this case

[MartinRinehart]

Flash is not supported on most Apples. Otherwise it's the best option. Movies are one alternative. Another is JavaScript.

With JS you can fade one image in while another fades out, giving an animated effect. You can animate styles. Animating left and/or top moves any DOM element. jQuery's 'animate()' method does this well. Plain JS does this even better.

Movies (Hollywood movies) are shot at 24 frames per second. JS animations work smoothly at higher rates. In one rather severe test, I animated a bit of the Sistine chapel's ceiling, making it swell and return to normal. Works well at 30 fps, but MSIE 8 didn't run fast enough to give a good result.

Everything you read on the web steers you away from using HTML/JS to change image sizes, recommending that you pre-process with true image software. (Photoshop I presume. Gimp if you can figure it out.) Don't believe this. Modern browsers are all quite capable of blowing images up or shrinking them down.

[Troy III]

Hi guys, I would like to add sth to my website but I am not sure what's the best way to achieve this. It is a kind of image gallery, say I have 10-20 images and I want to display all of them one after another one from the beginning to the end and then going back. So, let's take the 5 attached images: as you can see they have been taken in sequence so what I have in mind is to have a page where you can see only pic 87: you click a button sayin probably "run sequence" and from pic 87 goes very very quickly all the way to pic 91 so the effect is almost like a video and then straight away goes back to 87, so you get a rewind effect.
Now I am not sure whether it is a good idea to achieve this with css and jquery or somehow record a video perhaps with moviemaker to get that effect. I guess the video has the advantage of being played with every browser whereas the script requires more adjustements.

I haven't written any code yet but I think each picture can have a different z-index and with jquery I can change the order when I click the "run sequence" button, i will figure out how hopefully
thanks

There are lots of ways to achieve 2D animations on a normal browser without using anything else but js css and of curse the contents needed.

One of the fastest ways to go, is using a sprite image instead of a sequence of images.
A strip containing all the frames needed by your animation used as a background image of some page element with height and width of a frame and use a background positioning incremented by the frame width in pixels for forward animation and fixed width decrement for backwards play, using javascript. But if you want a forward loop all you need to do is reset the variable to 0 when the max frame is reached so it can continue to loop from the first one again.

[Violet_82]

thanks for your ideas guys. I think I won't use movie maker after all, I better practice a bit of javascript, css and html. In fairness I don't think I have ever used pure js, just jquery, so I presume I will need some help with the code.
Now let me look at how to do this.
@lordrt I appreciate the flash solution, but unfortunately I know absolutely nothing about flash, so I think it will be pretty hard for me to even get started
@MartinRinehart and @Troy III: I guess javascript will be, I hope I can get a very fast animation with js then.
Now, @Troy III, I got a little lost about your solution. You suggest to have a "strip" do you mean like having 5 images in one?I won't need a forward loop because I want the animation to stop when it comes back to the first image.
I start working on the code now.
thanks

[Troy III]

Now, @Troy III, I got a little lost about your solution. You suggest to have a "strip" do you mean like having 5 images in one?I won't need a forward loop because I want the animation to stop when it comes back to the first image.
I start working on the code now.
thanks

Yes, a sprite; - [all anim.,images in one img file].
Here is one [randomly chosen article] about sprites.
http://sixrevisions.com/css/css-sprites-site-speed/
And here is a link that may probably help you construct your sprite image with ease.
http://csssprites.com/bare.html

[MartinRinehart]

Go for it!

Flash's ActionScript is a JavaScript dialect, fitted out with extras that support Flash. So when you learn JS you are also learning Flash. And you can implement first with simple images, then replace individual images with sprites (per @Troy III) for a nice speed upgrade.

[cornedor]

If the size of the images are as big as the thumbs you could make a gif.

[Violet_82]

Troy III, I have never heard of that before. I had a look and I think it makes sense to do that if you really get a lot of traffic on your website, but other than that I am not quite sure what the advantage is. Anyway, since it is a new thing I don't mind giving a go at it, so here's the html and the sprite image in it http://www.antobbo.webspace.virginmedia.com/photogallery/test/rewind_1.htm
I tested the images in the sprite.css file and the sprite image works as it should, now I need to add the javascript to do the rest, and as said earlier on I might need a hand with this.
Now let's have a look at the html first: I added a button to run the sequence and I now need to write the function:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Antonio Borrillo Photography - Gloom</title>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Language" content="en">
		<meta name="description" content="Digital photography">
		<meta name="keywords" content="Photography,Digital Photography,Antonio Borrillo,Antonio Borrillo Photography,Gloom,Faith,Light">
		<meta name="author" content="Antonio Borrillo">

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <link rel="stylesheet" type="text/css" href="stylesheets/containers.css">
        <link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
        <link rel="stylesheet" type="text/css" href="stylesheets/sprite.css">

        <!--[if lt IE 7]>
			<link rel="stylesheet" type="text/css" href="stylesheets/ie6_and_below.css">
        <![endif]-->




	</head>

	<body>
		<div class="outer_wrapper">

        	<div class="inner_wrap">

            	<div class="banner">

                	<div class="heading_1">
                    	<h1>Antonio Borrillo Photography</h1>
                    </div><!-- END OF heading_1-->

                </div><!-- END OF banner -->

                <div class="navigation">

                	<ul>
                		<li><a href="home.htm">Home</a></li>
                        <li><a href="gallery.htm">Gallery</a></li>
                        <li><a href="portfolio.htm">Portfolio</a></li>

                        <li><a href="bio.htm">Bio</a></li>
                        <li><a href="contact.htm">Contact</a></li>
                	</ul>

                </div><!--navigation ENDS -->


                <div class="clear"><!-- EMPTY DIV TO CLEAR THE FLOAT-->
                </div><!-- END OF EMPTY DIV TO CLEAR THE FLOAT-->

				<div class="page_heading">
				<h2>Rewind</h2>
                </div><!-- END OF page_heading -->

                <div class="boxes_wrapper">

                	<div class="thumb_container">



               		</div><!-- END OF thumb_container-->

               		<input type="button" value="Run sequence" onclick="run_sequence()" class="run_sequence_button">

                	<div class="footer">
                		<p class="footer_paragraph">All photos and content © 2011 Antonio Borrillo. Please read the <a href="terms_and_conditions.htm">terms and conditions here.</a>
                    	</p>
              		</div> <!-- END OF footer -->

            	</div><!-- END OF boxes_wrapper -->

        	</div> <!-- END OF content_wrapper-->


        </div>	<!-- END OF outer_wrapper-->

	</body>

</html>

the css for the sprite image so far is:

@charset "utf-8";
/* CSS Document */

.thumb_container
{
	height:399px;
	width:602px;	
	display:block;
	background: url('../images/sprite.jpg') no-repeat;
	overflow:hidden;
}

/* to test coordinates work */

/*.thumb_container:hover
{
background-position: 0px -399px;	
}*/  

.run_sequence_button
{
	background: url('../images/sequence_button.jpg') no-repeat;
}

Now back to the javascript. I am thinking of what it needs to do, so before writing any code I think it is better if I have clearly in mind what it is supposed to do. It needs to get the sprite image from the css (I guess I can use sth like className img ) (apologies my js isn't that great!), then..ehm not sure. I remember Troy III said to "increment by the frame width in pixels for forward animation and fixed width decrement for backwards play" but I am not sure what the steps are for that. Could anybody give me a hand to write some pseudocode (no code please, I would like to do it myself, or at least try!) so I have a better idea?
thanks

[Violet_82]

RIght, I think I really need a hand here folks, been trying for hours but didn't get that far. I am working on the script, but because I am not quite sure how to do it in javascript I am doing it with jquery.
So here's my page with the relevant html and script highlighted in red:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Antonio Borrillo Photography - Gloom</title>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta http-equiv="Content-Language" content="en">
		<meta name="description" content="Digital photography">
		<meta name="keywords" content="Photography,Digital Photography,Antonio Borrillo,Antonio Borrillo Photography,Gloom,Faith,Light">
		<meta name="author" content="Antonio Borrillo">

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <link rel="stylesheet" type="text/css" href="stylesheets/containers.css">
        <link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
        <link rel="stylesheet" type="text/css" href="stylesheets/sprite.css">

        <!--[if lt IE 7]>
			<link rel="stylesheet" type="text/css" href="stylesheets/ie6_and_below.css">
        <![endif]-->


		<script type="text/javascript">

		$(function(){

			$(".run_sequence_button").click(function(){

				var image = $(".thumb_container").css("background-image");

				var current_width = $("#"+image).width();

				var current_height = $(".thumb_container").height();

				console.log(current_width);

				});

		});

		</script>

	</head>
	<body>
		<div class="outer_wrapper">

        	<div class="inner_wrap">

            	<div class="banner">

                	<div class="heading_1">
                    	<h1>Antonio Borrillo Photography</h1>
                    </div><!-- END OF heading_1-->

                </div><!-- END OF banner -->

                <div class="navigation">

                	<ul>
                		<li><a href="home.htm">Home</a></li>
                        <li><a href="gallery.htm">Gallery</a></li>
                        <li><a href="portfolio.htm">Portfolio</a></li>
                        <li><a href="bio.htm">Bio</a></li>
                        <li><a href="contact.htm">Contact</a></li>
                	</ul>

                </div><!--navigation ENDS -->


                <div class="clear"><!-- EMPTY DIV TO CLEAR THE FLOAT-->
                </div><!-- END OF EMPTY DIV TO CLEAR THE FLOAT-->

				<div class="page_heading">
				<h2>Rewind</h2>
                </div><!-- END OF page_heading -->

                <div class="boxes_wrapper">

                	<div class="thumb_container">



               		</div><!-- END OF boxes_wrapper-->

               	<input type = "button" value = "Run sequence" class = "run_sequence_button">

                	<div class="footer">
                		<p class="footer_paragraph">All photos and content © 2011 Antonio Borrillo. Please read the <a href="terms_and_conditions.htm">terms and conditions here.</a>
                    	</p>
              		</div> <!-- END OF footer -->

            	</div><!-- END OF boxes_wrapper -->

        	</div> <!-- END OF content_wrapper-->

        </div>	<!-- END OF outer_wrapper-->

	</body>

</html>

SO here's what I was trying to in the script:
when clicking on the button (at some point I will have to check how to customize the button, but it is not for this post) the variable image will store the background image from the css and then with this var current_width = ("#"+image).width(); I was hoping to store the width of the image in a variable but it doesn't seem to work for some reasons. I tested it with the firebug console and the "current_width" has a value of null. I tried this as well var current_width = (image).width(); but no joy, so I am a bit confused. The reason why I want to get the width and then the height is because I will need to then modify them and add a 399px to the height to move to the next image. Why is it not storing the value into the variable I wonder?!
When I sort that I will move on with the code

The css is this:

@charset "utf-8";
/* CSS Document */

.thumb_container
{
	height:399px;
	width:602px;	
	display:block;
	background: url('../images/sprite.jpg') no-repeat;
	overflow:hidden;
}

/* to test coordinates work fine */

/*.thumb_container:hover
{
background-position: 0px -399px;	
}*/  

.run_sequence_button
{
	background: url('../images/sprite_button.jpg') no-repeat;
}

here's the link: http://www.antobbo.webspace.virginmedia.com/photogallery/test/rewind_1.htm

[MartinRinehart]

In JS you get a reference to a var, if its id is 'my_id', this way:

var element_ref = document.getElementById( 'my_id' );

// to check:

alert( 'element is: ' + element_ref ); // 'null'? there's no element with 'my_id'


// how wide?

var width = element_ref.offsetWidth; // Google this to double check

// verify

alert( 'width is: ' + width );

// to make it 100 px wider

element_ref.style.width = width + 100 + 'px';

// it just got wider!

// ditto for height

There are exactly 12 sentences in the JavaScript language. jQuery is what you add after you can write a little JavaScript. It's a cart and horse thing.

[Violet_82]

Hi MartinRinehart,
thanks for that. I actually really like your way to test that things work using the alert boxes, I instead output onto the firebug console with

console.log

Now, down to the js. Yes I know I can use

getElementById

methods, but Iam not sure I can this time, because you see the image is a background image used in the css so I can't assign it an id. This is the reason why I used jquery

var image = $(".thumb_container").css("background-image");

to get the image into the script.
I have tried to do what you suggested in your code for the width and had

var current_width = image.offsetWidth;

but still doesn't work, current_width has a value of undefined. I mean in my code when I test the variable "image" with

console.log(image)

I get the URL of the image, which is good news, but when I then attempt to get the width and height

var current_width = $("#"+image).width();
var current_height = $("#"+image).height();

the value get a value of null. Is that sth I am missing?
I guess if the image wasn't a background image I could use your code

[Violet_82]

Hi there, I had another go and after a bit of research and attempts I realized that my approach wasn't the right one, so I rewrote the script a little bit. I realized that I don't need to get the height and width of the image but I can manipulate the div containing the image because it has the same size, so I have this now:

<script type="text/javascript">



		$(function(){



			$(".run_sequence_button").click(function(){


				/*console.log(image);*/
				



				var image_change = $(".thumb_container").css("backgroundPosition", "0px -399px");


			});

		});



		</script>

which is a good start :- ).
Now, I need to make sure that when I click on the "run sequence" button the y value changes adding -399 to the current value till it gets to 5586 which is the height of my sprite image. Say I create 2 variables,

var image_position_x = 0; 		
var image_position_y	= 0;

then I will have some kind of loop won't I? Perhaps a while loop that goes something like while ((image_position_x == 0 ) && (image_position_y <= 5586)) . The thing is I am not sure how to change-399px in the jquery script. Can I replace -399px in the script with the name of my variable?
thanks

[MartinRinehart]

If 'image_pos_x' is zero, you don't need it in the loop.

"0px -399px" is a string. I'm guessing it's the x pos, then the y pos, separated by a space and both suffixed with the dimension 'px'.

You need a function that you can pass the y position, (a number as you'll be doing arithmetic to compute it) and have the function return a string. Let's call it 'pos_string'. Something like this:

function pos_string( y_pos ) {
    var ret = '0px '; // x pos and a space
    ret += y_pos + 'px'; 
    return ret;
}

You can call such a function anyplace you would use the string. It's best to separate it out of the jQuery code:

var string_for_jquery = ...; // call function here
alert( string_for_jquery ); // test w/alert() or console.log

$long jQuery functions sequence here including string_for_jquery;

[Violet_82]

Hi thanks for that.
I was thinking what if I instead don't pass the position like that, would it be easier?
I came up with something this evening, not sure what you think about it, here it is:

<script type="text/javascript">

$(function(){

$(".run_sequence_button").click(function(){

/*console.log(image);*/

var image_position_y= 399;

while(image_position_y <= 5586 )

{
function change_pix()
{
var image_change = $(".thumb_container").css("backgroundPosition", "0px -" + image_position_y + "px");
image_position_y++;
}
setTimeout(change_pix(),3000);
}



});
});

</script>

The thing is though that it doesn't work properly, it only changes one image and that's it when I click on the "Run sequence" button. Firebug also returns this error:
useless setTimeout call (missing quotes around argument?) (?)() rewind_1.htm (line 41)
handle(a=Object { originalEvent=Event click, type="click", timeStamp=1321914928116, more...})jquery.min.js (line 55)
add()jquery.min.js (line 49)
setTimeout(change_pix(),3000);

I uploaded the script on my test site, here it is http://www.antobbo.webspace.virginmedia.com/photogallery/test/rewind_1.htm
What do you think?
thanks

[MartinRinehart]

The setTimeout()s in an animation are tricky. Your substitute for the function I suggested is fine. Here are some problems:

1) It's hard to read. Hard-to-read code is hard to debug. Google "JavaScript code conventions" and you will find Crockford's essay. Follow it religiously until you have enough experience to disagree with Crockford. (That's a lot of experience!)

2) Speaking of Crockford, the increment and deincrement operators (++ and --) are not one of what he calls "The Good Parts". Forget that JavaScript has them. These are a throwback go days when some computers had special "increment" instructions that were faster than adding one. "i++" might be faster than "i += 1". Always use the latter.

3) You are incrementing from about -400 to -5600 by ones, setting 3 second-delays. Did you want 5200 3-second delays?

4) If "foo" is a function, "foo" (the name) refers to the function. "foo()" (name followed by parens) executes the function and is, therefore, the value returned by the function. Your "setTimeout()"s are being called with the result of executing "change_pix", which does not explicitly return a value which is therefore returning "undefined".

5) "change_pix", through the "setTimeout()"s, is calling itself. This is called recursion. Recursive functions are never simple functions.

I'm writing a series of books on frontend engineering. I've got a nice explanation of how to do this animation ready for either Volume III or Volume V. I'm debating. Everyone wants to make their stuff sing and dance, so as early as possible (Volume III) would be good. On the other hand it takes very advanced techniques and logically fits near the end of the series, in Volume V.

You maybe want to look at jQuery's animate() method.

[Violet_82]

Hi MartinRinehart,
thanks for that. I had a quick look at Crockford's (with the intention to read it carefully) and...well what to say, as you pointed out I am not exactly following the standards!
Speaking about my code, I have rewritten it a bit, and used jquery animate() as you suggested. What I am aiming to get to is something like this (which doesn't work though)

<script type="text/javascript">
$(function(){
$(".run_sequence_button").click(function(){

var image_position_y = 399;

function changeSeq()
{

var t;
if(image_position_y <= 5586)
{
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},0);
image_position_y+=399;
t = setTimeout("changeSeq()", 1000);
}

else
{
image_position_y = 0;
t = setTimeout("changeSeq()", 1000);
}
}
});
});

</script>

the thing is that there is an error somewhere at the beginning when I use the function changeSeq() . I noticed that because this works

<script type="text/javascript">

$(function(){

$(".run_sequence_button").click(function(){


var image_position_y = 399;

$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},0);



});
});

</script>

whereas this doesn't anymore:

<script type="text/javascript">
$(function(){
$(".run_sequence_button").click(function(){
function changeSeq()
{
var image_position_y = 399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},0);
}

so it doesn't seem to like the fact that I use the function changeSeq() after the click function.
I know it is still not following the convention but if I get it to work I will tidy it up. ANy suggestion as to what to do to get it to work?
By the way,is your work available online and easy to unedrstand for a novice like me, if so I wouldn't mind taking a look at it, I might learn sth useful : - )

[Airshow]

Animated gif or animated sprite as Troy III suggests.

Attached gif was made here: http://tools.dynamicdrive.com/animatedgif/

Airshow

[MartinRinehart]

You're ignoring my suggestions re standards and writing pseudo code. Try them both. You'll be amazed at how much sense your code will make, and at how clearly bugs will stand out.

[Violet_82]

hi there, thanks for that.
@Airhow, nice one, but despite being a very good solution, I won't do much coding, so I won't do much practice. Pluse I want users to be able to somewhat control the animation with a button and I seem to understand that it won't be possible with that kind of image.
@MartinRinehart: sorry I didn't mean to ignore the suggestions or being rude in any way, I actually very much appreciate your contribution, I just thought to fix the code first and then tidy it up but if you think that tidying up will help then so be it, I will read the whole Crockford essay and try my best to tidy up the code, then repost it in here, hopefully it will be clear
thanks

[Airshow]

hi there, thanks for that.
@Airhow, nice one, but despite being a very good solution, I won't do much coding, so I won't do much practice. Pluse I want users to be able to somewhat control the animation with a button and I seem to understand that it won't be possible with that kind of image.

In that case, I think you should pursue Troy III's suggestion of an animated sprite.

Sprites are cool. See here for example.

The component parts are :

1. create a composite image comprising all of the individual frames of your animation.
2. create an HTML element with height and width, in which you animation will appear as a background image.
3. work out the offsets necessary to drive the image to each frame of the animation.
4. write some javascript (jquery if you like) to perform the animation.

OK, it's slightly tricky but there's lots of help already on the web.

Airshow

[Violet_82]

I think I painfully get there, although I want to read the essay about the javascript conventions and possibly tidy up the code a little as it was suggested to me.
script:

<script type="text/javascript">

$(function(){

$(".run_sequence_button").click(function(){

var image_position_y = 391;



while(image_position_y < 5474)



	{



			$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

			image_position_y+=391;



	}





	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);

	image_position_y-=391;

	$(".thumb_container_rewind").animate({backgroundPosition: "0px -" + image_position_y + "px"},100);









});

});



</script>

It is a little clunky I know but it works. The only thing that doesn't convince me is the actual sprite image. the height is 5585 (it should be 5586) because I have 14 images each with 399px height. The thing is that somehow some pixels get chopped off somewhere for some reasons so in the code I have to give each picture a height of 391px...no idea why.

Here's the css:

@charset "utf-8";

/* CSS Document */



.thumb_container_rewind

{

	height:399px;

	width:602px;	

	display:block;

	background: url('../images/sprite.jpg') no-repeat 0 0;

	overflow:hidden;

	margin: 0 auto;

}


/* to test coordinates work fine */



/*.thumb_container:hover

{

background-position: 0px -399px;	

}  */



.run_sequence_button

{

	background: url('../images/sprite_button.jpg') no-repeat;

}

and here it's in action:
http://www.antobbo.webspace.virginmedia.com/photogallery/test/rewind_1.htm