DaniWeb IT Discussion Community - Moving div Background Position on Click

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - Moving div Background Position on Click (http://www.daniweb.com/forums/thread190614.html)

Moving div Background Position on Click

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.

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.

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

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

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.

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

Re: Moving div Background Position on Click

Thanks guys thats awesome :icon_biggrin: