Использование спрайтов css с javascript

Я знаю, как использовать спрайты css с чистым html и css. Но что, если я динамически изменяю изображение, выбирая значение из раскрывающегося списка с помощью javascript?

<select name="pricing" onchange="check_pricing();" id="pricing_value">
  <option value="">[Please Select]</option>
  <option value="Free" <?php if($pricing == 'Free'): ?> selected="selected"<?php endif; ?>>Free</option>
  <option value="Paid" <?php if($pricing == 'Paid'): ?> selected="selected"<?php endif; ?>>Paid</option>
</select>

function check_pricing() {
  var pricing = document.forms["MyForm"]["pricing_value"].value;
  if (pricing == 'Paid')
  {
    document.getElementById('table_drawad').style.backgroundImage="url('Images/drawad_bg_paid.png')";
  }
  else
  {
    document.getElementById('table_drawad').style.backgroundImage="url('Images/drawad_bg_free.png')";
  }

}

С css я бы сделал так:

table.table_drawad{
  width:120px;
  height:123px;
  background-image:url('Images/newcampaign_sprite2.png');
  background-position:0px 0px;
}

person erdomester    schedule 17.05.2013    source источник
comment
Почему бы вам просто не добавить и не удалить класс. Это намного чище   -  person Sushanth --    schedule 17.05.2013
comment
Кроме того, если вы кэшируете свои селекторы, вы сделаете свой код быстрее и чище.   -  person elclanrs    schedule 17.05.2013
comment
Я еще не занимался обналичкой. Я пытаюсь оптимизировать время загрузки спрайтов   -  person erdomester    schedule 17.05.2013
comment
@Sushanth-- не могли бы вы добавить это в качестве решения? Это сработало. Спасибо.   -  person erdomester    schedule 18.05.2013