EDIT::SORRY I FIGURED IT OUT SECONDS AFTER POSTING BUT I LITERALLY WAITED A COUPLE HOURS BEFORE POSTING....I incorrectly embeded my " and '. It should have beenCode:style="background:url(iconImage.png)' + pos[i-1] + 'no-repeat>"'
The code:
So I put all my icon graphics into 1 image then I just offset it like:Code:var pos = [ '0px 0px', '-36px 0px', '-73px 0px', '-108px 0px', '-143px 0px', '-178px 0px', '-213px 0px', '-250px 0px', '-285px 0px', '-319px 0px' ]; var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ]; for ( var i=1; i<=10; i++ ) { $('<div style="background:url(iconSpriteGrey.png)" + pos[i-1] +" no-repeat;">' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( { accept: '#cardPile div', hoverClass: 'hovered', drop: handleCardDrop } ); }
Except the values following "url(iconImage)" are actually the ones in the "pos" array, and I want to apply that background image to the corresponding entry in array "words".Code:#icon1 {background:url(iconImage.png) 0px 0px no-repeat;} #icon2 {background:url(iconImage.png) 35px 0px no-repeat;} #icon3 {background:url(iconImage.png) 70px 0px no-repeat;} ....(etc)
Currently it shows the first icon in iconImage.png for each of the icons it puts out.........rather than adding the pos[i-1] index from the pos array...
Any way to do it like I'm attempting to?



Reply With Quote
Bookmarks