使用css精靈與javascript

Question

我知道如何使用純CSS和CSS的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; 
} 

Answer 1

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

    .classB{ 
     width:160px; 
     height:145px; 
     background-image:url('Images/newcampaign_sprite2.png'); 
     background-position:0px 0px; 
    } 

var elem = document.getElementById('table_drawad'); 
if (pricing == 'Paid') 
    { 
    elem.className = 'classB'; 
    } 
    else 
    { 
    elem.className = 'classA'; 
    }