比较棘手的问题,在theme里,关于CSS样式切换背景图片的问题

在vs2005中,使用themes,在skin文件里面设置了鼠标事件,每次onMouseOver或者onMouseOut时.btn_normal和.btn_active的样式的背景图片都要重新下载一次,网速慢时非常别扭,(即时在单独页面设置也一样),用JavaScript进行了图片预载后还是这样，只有刷新当前页面后就不会出现此问题,按钮才能平滑切换,请问有什么解决办法可以不人为或者脚本刷新而使它平滑切换呢？   
    
//--------   样式表代码   --------   
  <style>   
.btn_normal
{
BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; FONT-SIZE: 12px; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid; background:url(../images/btn.jpg);width:60px;height:21px;
}
.btn_active
{
BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; FONT-SIZE: 12px; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid; background:url(../images/btn_active.jpg);width:60px;height:21px; color:#333333;
}
</style>  //+++++++++++++++skin文件定义
 <asp:Button  runat="server" cssClass="btn_normal" onMouseOver="this.className='btn_active'" onMouseOut="this.className='btn_normal'" />//*************普通页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CompanyAdd.aspx.cs" Inherits="Org_CompanyAdd" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>组织机构</title> 
    <script   language=javascript  src="../js/myCalender3.js"></script> </head>
<body>
    <form id="form1" runat="server">
 <asp:Button ID="btnAdd" runat="server" Text="新增"  />
</form>
</body>
</html>
显示效果见附件,期待您的帮助,谢谢.

解决方案 »

  1.   

    用javascript处理，本来就是客户端的东西。
      

  2.   

    你可以定义好CSS样式，如果比较多的话，建议还是用JS直接处理。。例：aa.className = "css样式名";
    aa.style.background = "...";类似格式
      

  3.   

    还是不行,真头疼.
    用图片切换位置解决,但是效果跟之前切换图片一样
     <asp:Button  runat="server" CssClass="btn_normal" onMouseOver="this.style.backgroundPosition=60;" onMouseOut="this.style.backgroundPosition=0;" />