1

ユーザーが言語を選択できるように、ホームページの上部にある asp.net (vb) Web サイトに 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個のリンクボタン。これは CssClass を asp:Image タグに入れるだけで簡単ですか?もしそうなら、どうすればいいですか? それとも、これはもっと複雑ですか？

各フラグは 26 x 15 で、12 個あります。これらのスプライト画像を作成し、ホバー効果を保持することは可能ですか? スプライト画像は 334 ピクセル (24 x 12 + 11 x 2 の間のパディング) 幅 x (高さがどうなるかわかりません) でなければならないと考えています。それとも、これをスプライトするのを忘れて、そのままにしておくべきですか? 誰でも提供できるガイダンスに感謝します。私はこれが難しいものかもしれないことを知っています！

最初に git リポジトリを作成するときに、以前に追加してコミットしたのではないでしょうか?

私はこれを再現することができました：

durrantm.../aaa$ git init
Initialized empty Git repository in /home/durrantm/play/aaa/.git/
durrantm.../aaa$ l
total 16
drwxrwxr-x 14 durrantm 4096 Oct 31 22:28 ../
-rw-rw-r--  1 durrantm   11 Oct 31 22:29 ggg
drwxrwxr-x  3 durrantm 4096 Oct 31 22:29 ./
drwxrwxr-x  7 durrantm 4096 Oct 31 22:29 .git/
durrantm.../aaa$ git status
# On branch master
#
# Initial commit
#
# Untracked files:
#   (use "git add <file>..." to include in what will be committed)
#
#       ggg
nothing added to commit but untracked files present (use "git add" to track)
durrantm.../aaa$ git add .
durrantm.../aaa$ git status
# On branch master
#
# Initial commit
#
# Changes to be committed:
#   (use "git rm --cached <file>..." to unstage)
#
#       new file:   ggg
#
durrantm.../aaa$ git commit
[master (root-commit) 953c83f] new
 1 file changed, 1 insertion(+)
 create mode 100644 ggg
durrantm.../aaa$ l
total 16
drwxrwxr-x 14 durrantm 4096 Oct 31 22:28 ../
-rw-rw-r--  1 durrantm   11 Oct 31 22:29 ggg
drwxrwxr-x  3 durrantm 4096 Oct 31 22:29 ./
drwxrwxr-x  8 durrantm 4096 Oct 31 22:29 .git/
durrantm.../aaa$ git init
Reinitialized existing Git repository in /home/durrantm/play/aaa/.git/
durrantm.../aaa$ l
total 16
drwxrwxr-x 14 durrantm 4096 Oct 31 22:28 ../
-rw-rw-r--  1 durrantm   11 Oct 31 22:29 ggg
drwxrwxr-x  3 durrantm 4096 Oct 31 22:29 ./
drwxrwxr-x  8 durrantm 4096 Oct 31 22:30 .git/
durrantm.../aaa$ git add .
durrantm.../aaa$ git status
# On branch master
nothing to commit (working directory clean)
durrantm.../aaa$ 
durrantm.../aaa$ git commit
# On branch master
nothing to commit (working directory clean)

あなたが見ているようnothing to commitに、 a の後にどのようにあるのかに注意してください。git add .

1 つの「修正」は、git リポジトリを削除してからやり直すことです。これを行うと、通常どおり最終版をコミットできます。たとえば、次のようになります。

durrantm.../aaa$ rm -rf .git/
durrantm.../aaa$ l
total 12
drwxrwxr-x 14 durrantm 4096 Oct 31 22:28 ../
-rw-rw-r--  1 durrantm   11 Oct 31 22:29 ggg
drwxrwxr-x  2 durrantm 4096 Oct 31 22:34 ./
durrantm.../aaa$ git init
Initialized empty Git repository in /home/durrantm/play/aaa/.git/
durrantm.../aaa$ l
total 16
drwxrwxr-x 14 durrantm 4096 Oct 31 22:28 ../
-rw-rw-r--  1 durrantm   11 Oct 31 22:29 ggg
drwxrwxr-x  3 durrantm 4096 Oct 31 22:34 ./
drwxrwxr-x  7 durrantm 4096 Oct 31 22:34 .git/
durrantm.../aaa$ git add .
durrantm.../aaa$ git commit
[master (root-commit) 380863a] wewew
 1 file changed, 1 insertion(+)
 create mode 100644 ggg
4

1 に答える 1

2

css スプライト シートを介して表示するには、リンク ボタン内の実際のイメージ タグを削除する必要があります。これは、css スプライト シートが 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 の部分が英語のボックスに表示され、スプライト シートの 2 番目の 26px x 15px の部分がドイツ語のボックスに表示されます。

上記の .flagbutton 定義の margin-right でカバーされるため、スプライト シートのフラグ間にスペースを追加する必要はありません。ロールオーバーがなければ、最終的なスプライト シートは高さ 312px (26 x 12) x 高さ 15px になると思います。

ミックスにロールオーバーを追加する場合は、各画像のロールオーバー バージョンをスプライト シートの対応する画像の下に配置するだけです。これにより、スプライト シートの高さが 2 倍になります。次に、ID ごとにホバー クラスを追加して、次のようにホバーをカバーします。

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

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

これにより、スプライトが上に移動して、ホバー画像が表示されます。

于 2012-11-01T03:03:28.093 に答える