My question is how do i reference sprite images in a jquery code.The sprite image code im using is:\[code\]"#sprite-Apple{background:url(csg-50fcc55c6fc4a.png) no-repeat top left;}""#sprite-Apple{background-position: 0 0; width: 32px; height: 32px;}"\[/code\]The jquery code which defines the autocomplete items is listed below. Everything except the icon selection works fine. In the 1st set of autocomplete details im calling a class named "#sprite-Apple" which is defined in the style tags in the head of the html. Unfortunately this method of calling a sprite image dosen't seem to work. Im wondering how to call sprite images here. Also, I believe the line $( "#project-icon" ).attr( "src", "images/" + ui.item.icon ); in the jquery code has something to do with icon images. Im not able to correctly modify the code so as to display sprite images instead of the default .png images (such as icon: "jqueryui_32x32.png" and icon: "sizzlejs_32x32.png" in the 2nd and the 3rd set) mentioned in the default code. ` $(function() {\[code\] var projects = [ { value: "jquery", label: "jQuery", desc: "the write less, do more, JavaScript library", icon: "#sprite-Apple" }, { value: "jquery-ui", label: "jQuery UI", desc: "the official user interface library for jQuery", icon: "jqueryui_32x32.png" }, { value: "sizzlejs", label: "Sizzle JS", desc: "a pure-JavaScript CSS selector engine", icon: "sizzlejs_32x32.png" }];$( "#project" ).autocomplete({ minLength: 0, source: projects, focus: function( event, ui ) { $( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { $( "#project" ).val( ui.item.label ); $( "#project-id" ).val( ui.item.value ); $( "#project-description" ).html( ui.item.desc ); $( "#project-icon" ).attr( "src", "images/" + ui.item.icon ); return false; }}).data( "autocomplete" )._renderItem = function( ul, item ) { return $( "<li>" ) .data( "item.autocomplete", item ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .appendTo( ul );};});</script>\[/code\]`