[英]Using css sprites with javascript
I know how to use css sprites with pure html and css. 我知道如何在纯HTML和CSS中使用CSS精灵。 But what if I dinamycally change an image by selecting a value from a dropdown box with javascript?
但是,如果我通过使用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')";
}
}
With css I would do this: 使用css,我可以这样做:
table.table_drawad{
width:120px;
height:123px;
background-image:url('Images/newcampaign_sprite2.png');
background-position:0px 0px;
}
.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';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.