Hi there, I am trying to do something with a sprite image, which is changing the height of it when an action button is clicked. The sprite image is 602x5485px. For clarity here's the link http://www.antobbo.webspace.virginme...t/rewind_1.htm and here's the image http://www.antobbo.webspace.virginme...ges/sprite.jpg
and when the "Run sequence" button is clicked the height of the background image is supposed to change (each image is 602x399) so I need to add another 399px to move to the next one. The sequence will run till the last picture and then come back so that it gives a kind of movie animation (so in brief adding 399px till it reaches the last pic and then removing 399px till it gets to the first one).
Here's the html page without the script:
/* CSS Document */
background: url('../images/sprite.jpg') no-repeat;
/* to test coordinates work fine */
background-position: 0px -399px;
background: url('../images/sprite_button.jpg') no-repeat;
Ok let's get to the script now (which won't be an external file but within the html page, I separated it temporarily for the sake of clarity). What the script should do, I think, is to get the background image which is in the css, and change the css background position adding - as said - 399px. When it gets to the end, remove 399px till it gets to the first image.
So in practice here are my last (believe me of many!) attempt:
var image = $(".thumb_container").css("background-image");/* to get the image*/
$("#" + image).css("backgroundPosition", "0px -399px"); /* this is to change the size of the image */
I am not sure whether this is correct but I am not quite sure how to continue. The thing is, I want to change the height of the background image as said and the above should change at least one image but it doesnt work. If somebody has the patience to talk me through that (I am a beginner so I would like to attempt to build the code myself, so perhaps for now it might be better if you don't post the whole solution if you know what I mean but just an advice or maybe to put me onto the right track) I would really appreciate it
Hi I think I made some small progress in that now it partially works. I have done some research, looked up other sites and things and I realized that the way I was doing it wasn't the right way. So my script now has changed and is simpler:
I was creating unnecessary variables, and I realized I don't need to get he height and width of the image, I can work on the width and height of the div containing the image
So when I click on the RUn sequence button now the image actually change, now I have to find a way so that when the button is clicked the sequence runs all the way till the end and goes back to the first image.
I suppose I need to have a variable that stores the x and y, say sth like
var image_position_x = 0;
var image_position_y = 0;
and then perhaps a while loop that increments the y value. But how do I increment just the y value in the jquery script?