jquery to change height of sprite image

**js_newbie_80** · 11-19-2011, 04:01 AM

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:

HTML Code:

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

And here's the css just for the sprite image:

Code:

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

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:

Code:

<script type="text/javascript">

$(function(){

var image = $(".thumb_container").css("background-image");/* to get the image*/



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

/* console.log(image);*/

$("#" + image).css("backgroundPosition", "0px -399px"); /* this is to change the size of the image */



});

});

</script>

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
thanks

**js_newbie_80** · 11-20-2011, 02:45 PM

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:

Code:

<script type="text/javascript">



$(function(){

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


/*console.log(image);*/
var image_change = $(".thumb_container").css("backgroundPosition", "0px -399px");


});

});



</script>

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

Code:

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?

Thread: jquery to change height of sprite image

Thread Tools

Display

jquery to change height of sprite image

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions