1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:16 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

jquery to change height of sprite image

jquery,sprite image

         

dupalo

12:10 am on Nov 13, 2011 (gmt 0)

10+ Year Member



Hi there, I am having a nightmare with a jquery script I am building to change the height of an image sprite (of which I have never heard anything, I am just trying this for the first time).
A bit of background just to understand what I am trying to achieve.
I have a pretty big sprite image 602x5485 (there are 14 pages each of 602x399)and the idea is that in the html page I display on pic at time and when I click on the "Run sequence" button the all sequence run very very quickly in that one picture is replaced by the second one till it gets to the last one and then goes all the way back to the first one so to get almost a movie effect and a rewind effect.

SO here is my html file with the relevant bits and script in bold: 

<!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]-->


[b]<script type="text/javascript">

$(function(){

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

var image = $(".thumb_container").css("background-image");
alert( 'width is: ' + current_height );


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

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

console.log(current_height);

});

});

</script>
[/b]
</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-->

        [b]<input type = "button" value = "Run sequence" class = "run_sequence_button">[/b]

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


Here is my css just for the sprite bit: 

@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;
}


Right, about the script. What I did was to say that when the button is clicked the variable "image" will store the picture (which is a background pic set in the css so I can't use "getElementById" as I wanted to do at the beginning).
I tested this using an alert which returns the url of the picture so I presume it works. Then I went on and created a "current_height" variable, and here is where I get lost. When I run 
var current_height = $("#"+image).height();
and test the value with "console.log(current_height)" I get a value of null. WHy is that? why can't I get the height of my picture? I didn't continue with the script because I got stuck here, any suggestion? I don't necessarily want the code because I would like to try to build the whole script myself, but I am really stuck here, so any help will be greatly appreciated!
thanks

caffinated

5:06 pm on Nov 14, 2011 (gmt 0)

10+ Year Member



I am a bit confused as to why you are considering "current_height". It seems that you have an image container which is 602 x 399, behind which you have a sprite which is 602 wide as well. I am guessing that you want to simply change the background position of the sprite for the display of each image in the sprite...if so, you would only need to change the css of the sprite using JS.

I notice that you have not specified an initial background position in the css, this should be: 
background: url('../images/sprite.jpg') no-repeat 0 0;


Then you would us JS to alter the css background-position by -399px in the y on each click of the run-sequence button, testing to see if it is at the end of the sprite and resetting the background position to 0 0 if it is.

I guess it is worth pointing out that you seem to have some issues with your divs too (you have two closing divs for "END OF boxes_wrapper").

dupalo

10:49 pm on Nov 15, 2011 (gmt 0)

10+ Year Member



Hi caffinated,
thanks for your reply.
let's see...well yes you're right in that both the image container and the actual image are the same size. I thought that in order to change the background position of the image (yes you're right that's what I want to do) I had to get the image height and change it, but you're saying that I don't need that...good! I am happy I don't cos I got a bit lost I must admit.
The thing is to change the background-position by -399px each time I click on the button I will have to store the height of the image somewhere in order to change it.
So the initial script will be sth similar to what I have: 

<script type="text/javascript">

$(function(){$(".run_sequence_button").click(function(){
var image = $(".thumb_container").css("background-image"); //that's to copy the image into a variable and make it accessible to the script
$("#" + image).css("backgroundPosition", 0px -399px);//this was supposed to get the background-position changed, but firebug returns an error message which says:"
missing ) after argument list $("#"+image).css("backgroundPosition", 0px -399px); "

...

Now the way I see the script in my head then, after your comment, is to get the image into the script so that it can be manipulated, then change the background-position adding -399px. Then I need to store the height of the picture into a variable and if the variable is = 5586px then I need 
$("#"+image).css("backgroundPosition", 0px 0px);
. Does that sound reasonable at all?

I notice that you have not specified an initial background position in the css, this should be:
background: url('../images/sprite.jpg') no-repeat 0 0;
, yep amended it, although it was working even before, what's the advantage of setting the initial position?
I guess it is worth pointing out that you seem to have some issues with your divs too (you have two closing divs for "END OF boxes_wrapper")
yep sorry the first was meant to be 
<!-- END OF thumb_container-->
thanks for letting me know : - )

Fotiman

3:02 pm on Nov 16, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




$("#" + image).css("backgroundPosition", 0px -399px);

You're missing quotes around the 2nd parameter in the css method. Try this:

$("#" + image).css("backgroundPosition", "0px -399px");

dupalo

10:10 pm on Nov 16, 2011 (gmt 0)

10+ Year Member



yep sorry, I amended that straight after this post, so it's got the quotes around it so at least I got the rid of the nasty error in firebug, but the background position doesn't change, the image stays the same, not sure why.
I am thinking also about the next step - taking into consideration what caffinated said - so I should have a variable holding the current backgroundPosition of the image before I run this I believe
$(".run_sequence_button").click(function(){
so thatI store the value before the run sequence button is clicked on. But the value of the background image are 2, width and height so how do I store just the height of the image which is what I need?I thought of using 
.css('height')
but I need to get the values before the button is clicked so I rewrote the script a little 
$(function(){

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

var height = $("#" + image).css("height");

$(".run_sequence_button").click(function(){
/* console.log(image);*/

$("#" + image).css("backgroundPosition", "0px -399px");

});

});

but now it starts with errors again "$ is not defined
$(function(){ "...

dupalo

9:04 pm on Nov 20, 2011 (gmt 0)

10+ Year Member



Hi I had done some work on the script and removed few unnecessary things, I think I was making it too complicated for no reasons. Following caffinated's and Fotiman's suggestions I came up with this less complicated partial version: 
<script type="text/javascript">



$(function(){



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


/*console.log(image);*/




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


});

});



</script>

I don't need to get the dimension of the images I can manipulate the div that contain the image and in fact that works fine. Now, I need to make sure though that everytime I click on the run sequence button the y is increased of -399px which is the height of my image. I am not quite sure whether it is a good idea to create 2 variable like this 

var image_position_x = 0;

var image_position_y = -399;


Then I suppose I need to have some kind of loop, perhaps a while loop that increases the y in the script providing that the value of y doesn't exceed 5586 which is the height of the sprite image. But how do I change the height in the jquery script? I mean in this line 
var image_change = $(".thumb_container").css("backgroundPosition", "0px -399px");
can I replace -399px with image_position_y for the sake of argument?
thanks

caffinated

12:41 pm on Nov 21, 2011 (gmt 0)

10+ Year Member



That's exactly correct. You don't need to worry about the x variable because the x is not changing. You will probably also need some kind of timer-delay too, otherwise the speed with which the image changes will not allow a visitor to see each image. As soon as the next image is in position, it will already be moving to the next, know what I mean? So give your process a function name then use:

setTimeout (functionName(),3000);

dupalo

9:10 pm on Nov 21, 2011 (gmt 0)

10+ Year Member



Hi caffinated, thanks for that, is that what you mean? 

<script type="text/javascript">

$(function(){

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

/*console.log(image);*/

var image_position_x = 0;

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>

caffinated

10:18 pm on Nov 21, 2011 (gmt 0)

10+ Year Member



Looks about right...back at you...did it work?

You can lose the 
var image_position_x = 0;
tho, I reckon.

dupalo

10:59 pm on Nov 21, 2011 (gmt 0)

10+ Year Member



Yay, happy we got somewhere : - )!
Unfortunately it doesn't work though. When I click the "Run sequence" button, it only moves up to the second image, that's it, it doesn't go any further and firebug returns the following:

"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 must have made some stupid error I know!

I uploaded the script on a test site, to see it in action: [antobbo.webspace.virginmedia.com...]

Apologies about the x variable, I removed it now, I remember you mentioned it before but I completely forgot to get the rid of it
what do you think?

caffinated

1:23 am on Nov 22, 2011 (gmt 0)

10+ Year Member



Mmmm yep sorry...
setTimeout("change_pix()",3000);
with the inverted commas.

caffinated

9:27 am on Nov 22, 2011 (gmt 0)

10+ Year Member



I took a closer look. A few issues:
This line is only filling a variable, it's not changing anything other than the variable called image_change: 

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


Also, in your steps, you're only incrememting by 1, you should be incrementing by 399.

This works:

Put this in an external file called js.js 

var aa=0;
var t;
var positions;
var bb;
var q=0;

function runSeq(){
if(q==1){
return;
}
else
{
positions = ("0 "+aa+"px");
bb=document.getElementById("thumb_container");
bb.style.backgroundPosition = positions;
aa=aa+399;
if(aa > 5586){aa=0;}
t=setTimeout("runSeq()",3000);
}
};


Then your HTML should look like this: 

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


<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"></div>

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

<div class="boxes_wrapper">
<div class="thumb_container"></div>
<input type = "button" value = "Run sequence" id="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 inner_wrap-->
</div><!-- END OF outer_wrapper-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#run_sequence_button").toggle(
function(){q=0;runSeq();},
function(){q=1;runSeq();}
);
});
</script>

</body>
</html>


I took the liberty of allowing the run button to toggle the animation pausing. That's what the q variable handles.

Let me know how you get on.

dupalo

1:52 pm on Nov 22, 2011 (gmt 0)

10+ Year Member



Hi thanks for taking time to write that code.
I am actually not looking for a toggle event because I would like the pictures to be displayed from the first to the last and then back to the first when the "run sequence" button is pressed once, so everything is done by pressing onthe button once.

So I had a go again (sorry I think you really have enough of me!) and I decided (or perhaps suggested by someone else) to use the animate() method, it might be easeier, well I 'd hope. 


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


Now, bearing in mind your code and what you said, I wanted to include this 
var image_position_y = 399;

$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},0);
into another function so that I can easily call it with the setTimeout() method. So I have enclosed them in another function and came up with this: 


<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);

I tested it straight away but the code doesn't work, as opposed to the one withoug the changeSeq function. SO there is a fundamental mistake here that I am making, is that because I can't have a new function straight after 
.click(function(){

The idea is to then come up with something similar to this: 

<script type="text/javascript">
$(function(){
$(".run_sequence_button").click(function(){
function changeSeq()
{
var image_position_y = 399;
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>


Again, your code is surely good and I appreciated the time you took to write it, but this is something I would like to "get to" myself with, obviously, some help. If I use your code, yes, it will work but I have learned less than I would have if I wrote it myself, if I thought and made mistakes myself. Nonetheless, I find your help very very useful because I think I am getting closer: - ), althought I am aware that this takes time and the last thing I want to do is to keep you busy with this, but I am really trying to learn a bit more...sorry
I hope you understand

caffinated

6:59 pm on Nov 22, 2011 (gmt 0)

10+ Year Member



No worries. Well you need to start by moving the image position variable declaration outside of the changeSeq() function, otherwise you're resetting it back to 399 every time the timeout is fired.

dupalo

8:54 pm on Nov 23, 2011 (gmt 0)

10+ Year Member



Hiya, thanks for that
Of course, the variable what a dummy I am!
I tried something today. this is the latest version of the script, which unfortunately doesn't work at all, in that the image doesn't change. 

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


Now I have the impression that the function I created changeSeq() is causing problems because if I run this version of the script instead: 

<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>
it still doesn't work as it should but at least it changes one picture and moves to the second one.
COuld it be because I am not allowed to have a function following [quote]click(function(){[/quote] or something like that?

dupalo

10:06 pm on Nov 23, 2011 (gmt 0)

10+ Year Member



Sorry just to give a good idea of how the script should perform is this (hope you don't mind if I include the link) [antobbo.webspace.virginmedia.com...]
The script here isn't working that well though, somehow is pushing the picture up so towards the end of the ascending sequence you can see the normal picture plus the top of the following, have no idea why though, and the code is clunky as you can see from the page: 

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

/*function changeSeq()
{ */
var t;
if(image_position_y <= 5585)
{
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y+=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);
image_position_y-=399;
$(".thumb_container").animate({backgroundPosition: "0px -" + image_position_y + "px"},80);


/*t = setTimeout("changeSeq()", 1000); */
}

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

caffinated

11:20 am on Nov 24, 2011 (gmt 0)

10+ Year Member



I checked your sprite and using the mark on the lower right of each image (looks like a blank date stamp) discovered that the height of each image within the sprite is actually 391px not 399px.

dupalo

10:14 pm on Nov 24, 2011 (gmt 0)

10+ Year Member



HI, thanks for looking into that.
I think we got there in the end. I have made few changes here and there and now it seems to work. IN the script I changed the css from thumb_container to thumb_container_rewind, I decided to create another class rather than using the same as the rest of the site: 


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

The script is a bit clunky as you can see but at least I managed to squeeze a loop in, I couldn't find a way to replace all that code with another loop though, I am sure it can be done but I am not entirely sure how.
I have changed the css slightly:

@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;

}




Now, about the sprite. What to say, I don't know why it is 391 and not 399px. Fact is that I have checked the file and the height adds up to 5485 (and it should be 5486 so only 1 pixel less because it is 14 images each with 399px height). SO I think that those pixels are chopped off somewhere in the sprite I am really not sure because according to size you suggested the whole sprite picture should be 5474 height, so there is something wrong. I don't know whether this is because I didn't add any border in the sprite, fact is that there are some pixel missing.
You can see that in action here on the test site [antobbo.webspace.virginmedia.com...]
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 9:16 pm May 13, 2026