如何在JS中缩放精灵图像

我使用的JS代码最初是为单个PNG图像编写的，但我正在转换为使用Sprite图像。

代码最初为代码的一部分提取图像，并在调用缩略图时缩小。既然它称之为精灵类，那么产生同样效果的最佳方式是什么？

//<![CDATA[
var awards2 = {
	start : function(){
		if(location.href.match(/'/topic'/'d+'/?/)){
			for(var a=0;a<t_award2.users.length;a++){
				awards2.present(a);
			}
		}
	},
	present : function(a){
		var award2 = t_award2.users[a];
		if($("."+award2[0]+"-awards2").size() == 0){
			$("a.member[href="+main_url+"profile/"+award2[0]+"/]").parent().parent().next().find("dl.user_info dd.spacer").before('<dt>'+t_award2.name+':</dt><dd class="'+award2[0]+'-awards2"><div onmouseover="awards2.tooltip.open(event,'+a+');" onmouseout="awards2.tooltip.bye('+a+');" id="'+a+'-award2" class="'+award2[2]+'" alt="'+award2[1]+'" width="'+t_award2.thumbnail[0]+'px" height="'+t_award2.thumbnail[1]+'px" /></dd>');
		} else {
			$("."+award2[0]+"-awards2").append('<div onmouseover="awards2.tooltip.open(event,'+a+');" onmouseout="awards2.tooltip.bye('+a+');" id="'+a+'-award2" class="'+award2[2]+'" alt="'+award2[1]+'" width="'+t_award2.thumbnail[0]+'px" height="'+t_award2.thumbnail[1]+'px" />');
		}
	},
	tooltip : {
		current : 0,
		open : function(event,a){
			var award2 = t_award2.users[a];
			var pos = awards2.mouse.locate(event);
			awards2.tooltip.coords = [pos[0],pos[1]];
			if($("#"+a+"-tooltip").size() == 0)$("body").append('<div id="'+a+'-tooltip" style="position:absolute;max-width:500px;"><table><thead><tr><th colspan="2">'+award2[1]+'</th></tr></thead><tbody><tr><td><div class="'+award2[2]+'" alt="'+award2[1]+'" /></td><td>'+award2[3]+'<hr /><strong>Received:</strong> '+award2[4]+'</td></tr></tbody></table></div>');
			var elem = document.getElementById(a+"-tooltip");
			elem.style.left = pos[0]+10+"px";
			elem.style.top = pos[1]+10+"px";
			awards2.tooltip.current = a;
			document.onmousemove = awards2.tooltip.update;
		},
		update : function(event){
			var pos = awards2.mouse.locate(event);
			var elem = document.getElementById(awards2.tooltip.current+"-tooltip");
			if(elem !== null){
				elem.style.left = pos[0]+10+"px";
				elem.style.top = pos[1]+10+"px";
			} else {
				document.onmousemove = null;
			}
		},
		bye : function(a){
			switch(t_award2.closeFunction){
				case "slide":$("#"+a+"-tooltip").slideToggle("fast",function(){$(this).remove();});break;
				case "fade": $("#"+a+"-tooltip").fadeOut("fast",function(){$(this).remove();});break;
				default:     $("#"+a+"-tooltip").remove();break;
			}
		}
	},
	mouse : {
		locate : function(event){
			e = event || window.event;
			coords = [0,0]
			if (e.pageX || e.pageY) {
		        coords = [e.pageX,e.pageY];
		    } 
		    else {
		        var de = document.documentElement;
		        var b = document.body;
		        coords = [e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0),e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0)];
		    }
			return coords;
		}
	}
}
awards2.start();
//]]>

.exampleclass
{ display: inline-block; background: url(‘sprite.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
.exampleclass { background-position: -2px -3491px; width: 50px; height: 50px; }

<script type="text/javascript">
  
//<![CDATA[
var t_award2 = {
name : “Award”,
thumbnail : [20,20],
closeFunction : "fade",
users : [
[user ID,”Name”,”exampleclass”,”Message”,”Date”],
[user ID,”Name”,”exampleclass”,”Message”,”Date”]
]
}
//]]>
</script>

我在某个地方读到我需要背景大小之类的东西，但我不知道如何实现。当前运行此代码时，缩略图加载为太大的常规大小。

提前感谢：）