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.
<!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"> </div>
<a href="" onclick="return rotateImg();">Next Image (as a link)</a>
<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.
EnjoyAirshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
Doh! Problems in Firefox. Maybe someone knows the workaround. I'll have another look at it tomorrow.
Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
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.
<!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
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
