Databases
StackOverflow2013
Postsdbo
POCan I make a sprite image from these images using asp.net image using <asp:Image's?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan I make a sprite image from these images using asp.net image using <asp:Image's?
    text
    copied!<p>I have a row of 12 flags on an asp.net (vb) website at the top of my home page to allow the user to choose their language. Various speed tests like YSlow and Google Speed, are telling me to <strong>sprite these images</strong> to <strong>minimize the http requests</strong>. How would I go about doing so, if they're asp:image's, AND, there's a hover image?</p> <p>For now, I have 12 linkbuttons; they look like this (note, when you <strong>hover over a flag, that creates the hover image above it</strong>):</p> <p><img src="https://i.stack.imgur.com/1Fvm6.jpg" alt="When you hover over a flag, the pop-up image appears, as seen here:"></p> <p>Here is what my code for the images look like:</p> <pre><code> &lt;asp:LinkButton ID="btnSelectEnglish" runat="server" CommandArgument="en" OnClick="RequestLanguageChange_Click" class="flagbutton"&gt; &lt;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"/&gt; &lt;img class="map" src="images/flaghoveren.png" height="40" width="120" alt="View this website in English"/&gt; &lt;/asp:LinkButton&gt; &lt;asp:LinkButton ID="btnSelectGerman" runat="server" CommandArgument="de" OnClick="RequestLanguageChange_Click" class="flagbutton"&gt; &lt;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"/&gt; &lt;img class="map" src="images/flaghoverde.png" height="40" width="120" alt="View this website in Deutsch"/&gt; &lt;/asp:LinkButton&gt; </code></pre> <p>And so on ... 12 link buttons. Is this as simple as just putting a CssClass in the asp:Image tags and if so, how would I do that? Or is this something more complex? </p> <p>Each flag is 26 x 15 and there are 12 of them. Is it possible to create a sprite image of these and <strong>retain the hover effects</strong>? I'm thinking the sprite image will have to be 334 pixels (24 x 12 + 11 x 2 for the padding in between) wide x (I don't know what the height would be). Or should I just forget about spriting this and leave it as is? Thanks for any guidance anybody can offer; I know this might be a tough one!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload