How To Scale A Sprite Image In JS

Question

I am using a JS code which originally was written for individual PNG images, but I am converting to using a Sprite Image.

The code originally pulled an image for one part of the code and shrank when the thumbnail was called. What would be the best way to make the same affect now that it's calling a Sprite Class?

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

I read somewhere I'd need something like background-size but I know nothing about how to implement that. Currently when this code runs, the thumbnail loads as the regular size which is too big.

Thanks in advance :)

Answer 1

A couple of weeks ago I looked into creating responsive sprites as well and, while there is a lot of good information out there, none of it ended up working for what I wanted. Here are two of the best examples in my opinion, though both aren't without their drawbacks.

The second link talks about background size but it ends up being tricky depending on whether or not your sprites are all the same size.

http://tobyj.net/responsive-sprites/

http://blog.brianjohnsondesign.com/responsive-background-image-sprites-css-tutorial/