I am a totally new newbie. First Post! I am trying to duplicate the Simple Sprite Application on page 30 of Subercharged JavaScript Graphics by Raffaele Cecco. Code as follows:
<html>
<head>
<title>
Sprite DEMO
</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<style type="text/css">
#draw-target
{
width: 480px;
height: 320px;
background-color: #ffc;
position: relative;
}
</style>
<script type="text/javascript">
var DHTMLSprite = function(params){
// Set local variables of params
var width = params.width,
height = params.height,
imageswidth = params.imageswidth,
// Append a sprite div
$element= params.$drawTarget.append('<div/>').find(':last'),
// Set up the style attribute
elemStyle = $element[0].style,
//Store a local reference to the Math.floor function for faster access.
mathFloor = Math.floor;
//Set up the CSS style for sprite
$element.css
({
position: 'absolute',
width: width,
height: height,
backgroundImage: 'url(' + params.images + ')'
});
// Create and store DHTMLSprite in that
that =
{
draw: function (x,y)
{
elemStyle.left =x + 'px';
elemStyle.top = y + 'px';
},
changeImage: function (index)
{
index *= width;
var vOffset = -mathFloor(index / imagesWidth) * height;
var hOffset = -index % imagesWidth;
elemStyle.backgroundPosition = hOffset + 'px' + vOffset + 'px';
},
show: function()
{
elemStyle.display = 'block';
},
hide: function()
{
elemStyle.display = 'none';
},
destroy: function()
{
elemStyle.display = 'remove';
}
};
// Return the instance of DHTMLSprite
return that;
};
</script>
<script type="text/javascript">
$(document).ready(function()
{
var params =
{
images: 'images.png',
imagesWidth: 256,
width: 64,
height: 64,
$drawTarget: $('#draw-target')
};
var sprite1 = DHTMLSprite(params),sprite2 = DHTMLSprite(params);
sprite2.changeImage(5);
sprite1.draw(64,64);
sprite2.draw(128,128);
});
</script>
</head>
<body>
<div id="draw-target">
</div>
</body
</html>