問題タブ [css-sprites]

ページの要素の背景としてスプライト画像を設定していますが、画面上で実際に表示できるように適切なオフセットを見つけるにはどうすればよいですか?

ツイッターやフェイスブックなどへのリンクとして3つの小さな画像を使用しているサイトで作業しています。画像の上にマウスを置いたときに表示したいコールアウト画像があります。

ここで重要なのは、コールアウト画像がページ上の他の画像やテキストと干渉しないことです。

このニーズを満たす便利なソリューションはありますか？

ページに表示したい大量のサムネイル セットがあります (200 以上)。CSS スプライトを使用してそれらをロードし、HTTP リクエストを最小限に抑えたいと思います。それらすべてを 1 つの巨大なファイルに入れるのは悪い考えだと思いますが、それらを 40 ～ 50 のサムネイルの約 6 つのファイルに分割するとうまくいくはずです。

すべてのサムネイルはかなり低色です (品質を落とさずに 256 色に減らすことができます) が、全体として、すべてのサムネイルはより多くの色をカバーしています。

では、色に基づいてそれらをグループ化する簡単な方法はありますか? 後で ImageMagick やオンライン スプライト ツールを使用してつなぎ合わせることができるので、ファイルの各グループを個別のフォルダーに配置しても問題ありません。しかし、そのすべてを (CSS を使用して) 1 つにまとめるのもよいでしょう。

更新: 色でグループ化する理由:
アイデアは、より多くの帯域幅を節約することです。ほとんど青のサムネイルが 10 個、緑が 10 個、赤が 10 個ある場合、それらを 3 つの画像に結合して、それぞれを 256 色に減らすことができます。サムネイルを混ぜて 256 色に減らすと、画像の品質が低下します。

誰かが画像スプライトにSVGを使用したことがありますか？非常によく似たGIFとJPGの束をいくつかのスケーラブルなSVG画像に置き換えたいのですが、画像のグラデーションとボタンの形状の仕様がSVGを膨らませています。

複合図を作成できれば、グラデーションやベースボタンの形状などを再利用できるかもしれません。CSSドキュメント内のSVG画像を参照できるかどうかはわかりません。imgタグではなくembedまたはobjectタグを介してSVGを使用する必要があるため、そうではないと思います。

おそらく、プログラムで、たとえばjqueryを使用して、マスターSVGドキュメントのフラグメントを取得し、それを使用してオンデマンドでSVGイメージを作成することができます。しかし、私はそれがかなり遅いと思いますか？

ありがとう、

アンドリューマシューズ

1. css-sprite は良いテクニックですか? 私はhttp://spriteme.org/でその長所について読みました。また、ここのスタックオーバーフローで css スプライトに関する多くの質問を見てきました。

2. その短所は何ですか？

3. サイトで主張されているように、すべてのブラウザで動作しますか?

私のクライアントは、私たちが彼のために開発している形式で、多くの非伝統的な入力を使用することに非常に投資しています. 以下の画像は、インターフェイスのさまざまな状態を表しており、最後の状態は現在のコンテキストで無効になっていることを示しています。エンド ユーザーは、入力の操作方法についてトレーニングを受けます。

代替テキスト http://www.nolaflash.com/interface.gif

私の考えでは、画像のクリック可能なゾーンを表す画像マップを作成し、onclick イベントで隠しフィールドを設定し、要素の CSS を変更して背景スプライトを適切な座標に移動させます。

人々はこれについてどう思いますか？JavaScript が無効になっている人以外に明らかな欠陥がありますか?

最終的なソリューションを iPhone やその他のデバイスに適したものにしたいと考えています。

あなたの考えは高く評価されます。

css スプライトを使用して css メニューを作成しましたが、問題はスプライトにあり、バックグラウンドでのみ使用するインライン画像を使用しないため、ブラウザーで画像が無効になっている場合は何も表示されません。これに対する解決策はありますか？

例えば ​​：

このメニューを見て画像をオフにしてください: http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html (ブラウザで画像が無効になっていると表示されません)

このメニューはこの見積もりに反対です

画像を無効にしてウェブサイトが機能することを確認する

考え。ほとんど過去のものですが、インターネットの速度が非常に遅いユーザーがまだいます。また、何らかの理由でユーザーが画像を無効にする必要がある場合でも、必要なすべてのコンテンツにアクセスできますか?

http://csswizardry.com/quick-tips/#tip-02

このタイプのナビゲーションを使用すべきではありませんか。

CSSスプライトを生成するためのオフラインソフトウェアまたはプラグイン（dreamweaverなど）が存在するかどうかは誰にもわかりません。つまり、画像をマージして css ルールを生成します。

ここに投稿があることは知っています: Tools to make CSS sprites?

しかし、それらはすべてオンライン生成ツールです。

アプリケーションでcssspritesを使用しています。Cssイメージは、IE6とIE7を除くすべてのブラウザーに正常に読み込まれます。この問題を解決する方法がわかりません。

参考までにMyHtmlPages Blockquote

私のスタイルシート