drag and drop images using jquery

Question

I'm newbie at jquery and I'm trying to develop a game for kids that work with drag and drop images in specific zones.It's the same as this card game in this url: http://www.elated.com/res/File/articles/development/javascript/jquery/drag-and-drop-with-jquery-your-essential-guide/card-game.html I tried to understand its source code but I can't change the cards with images in this part of code :

    // Create the pile of shuffled cards
  var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
  numbers.sort( function() { return Math.random() - .5 } );

  for ( var i=0; i<10; i++ ) {
    $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );
  }



     // Create the card slots
      var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
      for ( var i=1; i<=10; i++ ) {
        $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
          accept: '#cardPile div',
          hoverClass: 'hovered',
          drop: handleCardDrop
        } );
      }

    }

The whole description of the source code is here : http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/

I'm waiting for your help please and thanks in advance

Answer 1

If I am not wrong then you want to set image of all the cards which you are utilizing in game.

Then you just have to set background image of all the cards in css like take example of card 1 so its id is card1 then set its css as following

#card1{
background-image:url("http://static3.bigstockphoto.com/thumbs/7/0/3/large2/30774275.jpg");
}