0

ここに画像の説明を入力

私はこのようなアイコンの写真を持っており、この写真が http リンクの時間を節約するのに役立つことを知っています。ただし、使い方がわかりません。

  1. 座標で小さなアイコンを取得する必要があると思います。これを行うことができるライブラリはありますか？JQuery? 道場？
  2. どうすればこの画像を取得できますか? または CSS を使用して画像を表示できることはわかっていますが、別の方法でこの画像を取得する必要があると思います。Javascript ライブラリもこの仕事をすることができますか?
4

2 に答える 2

1

実際の使い方はとても簡単です。ui_elementボタンのクラスを用意しましょう。すべてのボタンにはui_elementクラスとbutton_***クラスがあります。
見てください：

.ui_element {
    background-image: url("http://i.stack.imgur.com/S02fG.png");
    width: 24 px;    /*May be different for specific buttons*/
    height: 24 px; 

}
.button_home {
    background-position: -23px -23px; /*Move the main image to the deserved element*/

}

次に、理論的には、次のコードは赤い「ホーム」アイコンを表示する必要があります。

<div class="ui_element button_home"></div>

また、ホバー時に別の表示を行うなど、いくつかの凝ったトリックを実行することもできます。

div.button_home {
    background-position: 0px -23px; /*grey icon*/
}
div.button_home:hover {
    background-position: -23px -23px; /*red icon*/
}

私のコードでは、すべてが適切に配置されて表示されないことに注意してください。画像を生成するときに非常に正確なパターンが使用されていない限り、CSS コードを自動的に生成する方法はありません。

于 2013-04-14T12:37:48.767 に答える
0

これを「動的に」行う方法はありません。つまり、座標を把握できません。CSSで探しているものを手動で実現するには、使用します

background:url('sprites.png') 0 0;

フォーマットは画像そのもの、左端、下端です。

于 2013-04-14T12:38:11.647 に答える