我可以使用 <asp:Image's 使用 asp.net 图像从这些图像中制作精灵图像吗？

Question

在我的主页顶部的一个 asp.net (vb) 网站上有一行 12 个标志，以允许用户选择他们的语言。 YSlow 和 Google Speed 等各种速度测试告诉我要拆分这些图像以最小化 http 请求。如果它们是 asp:image 的，并且有一个悬停图像，我该怎么做？

目前，我有 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 个链接按钮。这就像在 asp:Image 标记中放置一个 CssClass 一样简单吗？如果是这样，我该怎么做？或者这是更复杂的事情？

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

Answer 1

为了通过 css sprite sheet 显示它们，您需要去掉链接按钮中的实际图像标签，因为 css sprite sheet 是通过 background-image 属性应用的。

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

.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 部分。

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

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

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

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

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