Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 5342

May 5th, 2009

Moving div Background Position on Click

Expand Post »

I have a product image that is 4 images 'sewn together'
http://www.flickr.com/photos/28033561@N03/3504394261/

I am going to set a div called ProductImage and then have the background of the div set to this image, but with only the top image showing.

I then want to have a button for 'more views' and when this is clicked the background position shift to show the next part of the image showing a different view.

What is a suitable way to do this, I am hoping it could be done with a combination of css and javascript.

Similar Threads

Newbies buttons/links in IT Professionals' Lounge

millsy007

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

28 posts
since Feb 2009

Permalink

May 5th, 2009

Re: Moving div Background Position on Click

Millsy,
You just reinvented something called a Sprite!

Put your adidas shoes image (shoes.jpg) in a folder named "images", then save the following code as eg. "myProduct.html", then browse it in your browser.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#productImg div {
	margin:6px 0;
	width : 241px;
	height : 125px;
	background : no-repeat;
	background-image : url('images/shoes.jpg');
}
#productImg .img0 { background-position : left 0; }
#productImg .img1 { background-position : left -125px; }
#productImg .img2 { background-position : left -250px; }
#productImg .img3 { background-position : left -375px; }
</style>
<script type="text/javascript">
function rotateImg(){
	var div = document.getElementById('productImg').firstChild;
	var number_of_images = 4;
	div.className = 'img' + (++rotateImg.seq % number_of_images);
	return false;
}
rotateImg.seq = 0;
</script>
</head>
<body>
<div id="productImg">
	<div class="img0">&nbsp;</div>
	<a href="" onclick="return rotateImg();">Next Image (as a link)</a><br />
	<input type="button" onclick="return rotateImg();" value="Next Image (as a button)">
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#productImg div {
	margin:6px 0;
	width : 241px;
	height : 125px;
	background : no-repeat;
	background-image : url('images/shoes.jpg');
}
#productImg .img0 { background-position : left 0; }
#productImg .img1 { background-position : left -125px; }
#productImg .img2 { background-position : left -250px; }
#productImg .img3 { background-position : left -375px; }
</style>
<script type="text/javascript">
function rotateImg(){
	var div = document.getElementById('productImg').firstChild;
	var number_of_images = 4;
	div.className = 'img' + (++rotateImg.seq % number_of_images);
	return false;
}
rotateImg.seq = 0;
</script>
</head>
<body>
<div id="productImg">
	<div class="img0">&nbsp;</div>
	<a href="" onclick="return rotateImg();">Next Image (as a link)</a><br />
	<input type="button" onclick="return rotateImg();" value="Next Image (as a button)">
</div>
</body>
</html>

You can style the button/link as you wish in CSS.

Enjoy

Airshow

Airshow

Sponsor

Reputation Points: 300

Solved Threads: 357

WiFi Lounge Lizard

Offline

2,519 posts
since Apr 2009

Permalink

May 5th, 2009

Re: Moving div Background Position on Click

Doh! Problems in Firefox. Maybe someone knows the workaround. I'll have another look at it tomorrow.

Airshow

Last edited by Airshow; May 5th, 2009 at 10:39 pm.

Airshow

Sponsor

Reputation Points: 300

Solved Threads: 357

WiFi Lounge Lizard

Offline

2,519 posts
since Apr 2009

Permalink

May 6th, 2009

Re: Moving div Background Position on Click

OK, this version has been tested in IE6, Firefox 3.0.10, Opera 9.01 (all under Win2000).

We use a constructor to build the DOM elements within a nominated DIV. Thus the code can be reused to easily incorporate two or more sprites on the same page with very minimal additional HTML and javascript.

For flexibility, we also compute background position at each rotation rather than rely on predefined CSS rules.

Save image and html file as per version 1 above.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sprites</title>
<style type="text/css">
.spriteControl { font-size:10pt; color:#333333; text-decoration:none; }
.spriteControl:hover { color:#339933;}
</style>
<script type="text/javascript">
function Sprite(elementId, width, height, spriteURL, numImages, seq, controlTxt){
   /*
    * Parameters
    * elementId : The id of an empty HTML div into which the sprite will be inserted.
    * width : the width of the sprite
    * height : the height of one frame of the sprite (all frames must be of the same height)
    * spriteURL : the URL of the sprite image (ie vertically abutting images in one jpg/gif/png)
    * numImages : the number of individual images in the sprite. Note: this may be less than the total number of images in the sprite; any excess miages will not be shown.
    * seq : the image at which the sprite will start (first image is at the top of the sprite and is numbered 0)
    * controlTxt : The text which appears as a clickable control link below the sprite.
    */
	seq = (!seq) ? 0 : (seq % numImages);
	controlTxt = (!controlTxt) ? 'Next' : controlTxt;
	var div = (document.getElementById) ? document.getElementById(elementId) : document.all[elementId];
	var innerDiv = document.createElement('div');
	var control = document.createElement('a');
	var txt = document.createTextNode(controlTxt);
	div.appendChild(innerDiv);
	control.className = 'spriteControl';
	control.setAttribute('href', '');
	control.appendChild(txt);
	div.appendChild(control);
	innerDiv.style.width = width + 'px';
	innerDiv.style.height = height + 'px';
	innerDiv.style.backgroundImage = ["url('" , spriteURL , "')"].join('');
	innerDiv.style.backgroundRepeat = 'no-repeat';
	var setBackground = function(){
		var posY = -height * (seq % numImages);
		innerDiv.style.backgroundPosition = ['0% ' , (posY+'px')].join('');
	};
	this.rotate = function(){
		seq++;
		setBackground();
		return false;
	};
	setBackground();
	control.onclick = this.rotate;
}
var sprites = [];
onload = function(){
	sprites.push(new Sprite('productImg',  241, 125, 'images/shoes.jpg', 4, 0, 'Rotate'));
	sprites.push(new Sprite('productImg2', 241, 125, 'images/shoes.jpg', 3, 2, 'Rotate'));
};
</script>
</head>
<body>
 
<div id="productImg"></div>
<div id="productImg2"></div>
 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Sprites</title>
<style type="text/css">
.spriteControl { font-size:10pt; color:#333333; text-decoration:none; }
.spriteControl:hover { color:#339933;}
</style>
<script type="text/javascript">
function Sprite(elementId, width, height, spriteURL, numImages, seq, controlTxt){
   /*
    * Parameters
    * elementId : The id of an empty HTML div into which the sprite will be inserted.
    * width : the width of the sprite
    * height : the height of one frame of the sprite (all frames must be of the same height)
    * spriteURL : the URL of the sprite image (ie vertically abutting images in one jpg/gif/png)
    * numImages : the number of individual images in the sprite. Note: this may be less than the total number of images in the sprite; any excess miages will not be shown.
    * seq : the image at which the sprite will start (first image is at the top of the sprite and is numbered 0)
    * controlTxt : The text which appears as a clickable control link below the sprite.
    */
	seq = (!seq) ? 0 : (seq % numImages);
	controlTxt = (!controlTxt) ? 'Next' : controlTxt;
	var div = (document.getElementById) ? document.getElementById(elementId) : document.all[elementId];
	var innerDiv = document.createElement('div');
	var control = document.createElement('a');
	var txt = document.createTextNode(controlTxt);
	div.appendChild(innerDiv);
	control.className = 'spriteControl';
	control.setAttribute('href', '');
	control.appendChild(txt);
	div.appendChild(control);
	innerDiv.style.width = width + 'px';
	innerDiv.style.height = height + 'px';
	innerDiv.style.backgroundImage = ["url('" , spriteURL , "')"].join('');
	innerDiv.style.backgroundRepeat = 'no-repeat';
	var setBackground = function(){
		var posY = -height * (seq % numImages);
		innerDiv.style.backgroundPosition = ['0% ' , (posY+'px')].join('');
	};
	this.rotate = function(){
		seq++;
		setBackground();
		return false;
	};
	setBackground();
	control.onclick = this.rotate;
}
var sprites = [];
onload = function(){
	sprites.push(new Sprite('productImg',  241, 125, 'images/shoes.jpg', 4, 0, 'Rotate'));
	sprites.push(new Sprite('productImg2', 241, 125, 'images/shoes.jpg', 3, 2, 'Rotate'));
};
</script>
</head>
<body>

<div id="productImg"></div>
<div id="productImg2"></div>

</body>
</html>

Airshow

Sponsor

Reputation Points: 300

Solved Threads: 357

WiFi Lounge Lizard

Offline

2,519 posts
since Apr 2009

Permalink

May 11th, 2009

Re: Moving div Background Position on Click

Thanks guys thats awesome

millsy007

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

28 posts
since Feb 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: make div appear when you click a link

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: opinions please

DaniWeb Message

Cancel Changes

User Name
Password