我可以使用asp.net图像从这些图像制作精灵图像

Question

我在主页顶部的asp.net（vb）网站上有一排12个标志，允许用户选择他们的语言。 YSlow和Google Speed之类的各种速度测试告诉我精灵扫描这些图像以最小化http请求。我怎么会这样做，如果他们是asp：图像，并且，有一个悬停图像？

目前，我有12个链接按钮;它们看起来像这样（注意，当你将鼠标悬停在旗帜上时，会在其上方创建悬停图像）：

以下是我的图片代码：

  <asp:LinkButton ID="btnSelectEnglish" runat="server"
  CommandArgument="en" OnClick="RequestLanguageChange_Click"
  class="flagbutton">      
  <asp:Image ID="Image8" runat="server" ImageUrl="~/images/flagen.png" height="15" 
  width="26"
  tooltip="View this website in English" title="View this website in English"/>
  <img class="map" src="images/flaghoveren.png" height="40" width="120" alt="View this 
  website in English"/>
  </asp:LinkButton>

  <asp:LinkButton ID="btnSelectGerman" runat="server"
  CommandArgument="de" OnClick="RequestLanguageChange_Click"
  class="flagbutton">      
  <asp:Image ID="Image7" runat="server" ImageUrl="~/images/flagde.png" height="15" 
  width="26"
  tooltip="View this website in Deutsch" title="View this website in Deutsch"/>
  <img class="map" src="images/flaghoverde.png" height="40" width="120" alt="View this
  website in Deutsch"/>
  </asp:LinkButton>

等等... 12个链接按钮。这简单到只是将一个CssClass放在asp：Image标签中，如果是这样，我该怎么做？或者这是更复杂的事情？

每个标志是26 x 15，其中有12个。是否可以创建这些精灵图像并保留悬停效果？我认为精灵图像必须是334像素（24 x 12 + 11 x 2之间的填充）宽x（我不知道高度是多少）。或者我应该忘记精神打算并保持原样？感谢任何人提供的任何指导;我知道这可能很难！

Answer 1

为了通过css精灵表显示它们，你需要删除链接按钮中的实际图像标签，因为css精灵表是通过background-image属性应用的。

由于看起来每个都有一个“flagbutton”类，你可以指定每个带有class flag按钮的元素都有一个背景图像（你的精灵表）。这看起来像这样：

.flagbutton {
    background-image:url(images/myspritesheet.png);
    width:26px;
    height:15px;
    margin-right:2px;
    display:block;
    float:left;
}

然后，由于每个都有一个唯一的ID，你可以在你的css文件中为每个链接按钮指定一个唯一的背景位置，这样你就可以基本上在每个标志的窗口中滑动精灵表来定位它以显示正确的旗。这就是这样的：

#btnSelectEnglish {
    background-position: 0 0;
}

#btnSelectGerman {
    background-position: 0 -26px;
}

这将显示英文框中精灵表的第一个26px x 15px部分，以及德语框中精灵表的第二个26px x 15px部分。

您不需要在精灵表中的标志之间添加间距 - 因为它将由上面.flagbutton定义中的margin-right覆盖。如果没有翻转，我认为您的最终精灵表将高度为312像素（26 x 12），高度为15像素。

如果要在混合中添加翻转，只需将每个图像的翻转版本放在精灵表单中的对应项下方。这会使精灵表的高度翻倍。然后，为每个ID添加一个悬停类，以覆盖悬停，如下所示：

#btnSelectEnglish:hover {
    background-position: -15px 0;
}

#btnSelectGerman:hover {
    background-position: -15px -26px;
}

这会将你的精灵向上移动以显示悬停图像。