問題タブ [css-sprites]

4 つのバナー画像があり、無限ループで基本的なフェード アニメーションを使用して循環させたいと考えています。私はこのjQueryプラグインを見つけました: http://jquery.malsup.com/cycle/そして、このようにしようとしました:

HTML:

CSS:

ジャバスクリプト:

最終的に起こるのは、サイクル中にそれぞれに絶対位置が設定されているため、バナーがどれも表示されないことです。ここで何が欠けていますか？これだけでうまくいくのではないですか？これを行うより良い方法はありますか？

重複の可能性：
画像をスプライトする最良の方法は？

こんにちは、CSS スプライト ジェネレーターにhttp://spritegen.website-performance.orgを使用しています。しかし、それだけの価値はありません。私は yahoo、bing.google のようなサイトを見たことがあります。彼らは非常に優れた高レベルの CSS スプライトを使用していました。そのようなcssスプライトジェネレーターをオンラインで入手できる場所。さらに、画像は完全に圧縮され、最小化されます。助けていただければ幸いです。

データベースに保存されている画像を表示するために使用しているASHXハンドラーがあります。画像をサムネイルとして表示し、ユーザーが画像の上にマウスを置くとフルサイズで表示します。

実行時に画像を組み合わせて、この状況で使用するCSSスプライトを作成するにはどうすればよいですか？

それができるなら、どこから始めるべきかについて誰かが提案を持っていますか？

UPATE

ほとんどの人が、これはスプライトを使用するのに適した状況ではないと言っているようです。私はスプライトの概念に慣れていないので、我慢してください。

データベースから1ページに30枚のサムネイルを毎回読み込む場合、30枚の個別の画像を渡すのではなく、サーバーからクライアントに1つの大きな画像として渡すのが意味がないのはなぜですか。これはもっと速いのではないでしょうか？これがCSSスプライトの目的ではありませんか？

このコードを使用して、スプライト駆動のアイコンを表示しています (グラフィックスが利用可能な場合はアイコンのみが表示され、他のデバイスではテキストが役立つはずです):

マークアップ:

CSS:

スプライト自体はどのブラウザーでも正常に動作しますが、オーバーフローと組み合わせたパディングが想定どおりに機能しないため、何らかの理由でテキストが Opera と Chrome に表示されます。

これを改善する方法はありますか？前もって感謝します....

CSSスプライトを使用して、繰り返し画像と非繰り返し画像に1つの画像のみを使用する方法があるかどうか疑問に思っていました。したがって、この場合、幅と高さに関係なく、ページ上のすべての画像を結合したいと考えています。標準は、すべての非繰り返し画像を使用して 1 つの画像を作成し、すべての繰り返し画像を使用して別の画像を作成することです。しかし、すべてに1つの画像を使用できるかどうかを知りたかっただけです.

ありがとう。

http://code.google.com/apis/recaptcha/intro.htmlを参照してください 。ユーザーがページをズームすると、下部に水平バーが表示されません。

このプロパティを使用して 2 列のページを設計する方法を知りたいです。

ありがとうございました

ショートハンド CSS をロングハンドに自動的に変換できるツールはありますか? 速記ではうまく機能しないSmartSpritesを使用したいので、これが必要です。

そして、できればその逆を行うツールでもあるので、スプライトの計算後にCSSを可能な限り縮小できます...

また、自動スピリットの他のソリューションも大歓迎です。基本的には、開発者が未加工の css コードで開発できるように、ビルド プロセスに統合できるコマンド ライン ツールを探しています。

ねえ、画像の一部をクリックすると、ちょっとしたミニゲームが発生するので、自分のページ（http://marioplanet.com/images/logo/logo.png ）のヘッダーをインタラクティブにできるかどうか疑問に思いました。 。

テキストの上にマリオだけが表示され、「ミニゲーム」の開始時に残りのキャラクターが消えます。

次に、エンドユーザーは左右の矢印キーを使用してマリオを左右に移動し、スペースバーを使用してマリオをジャンプさせることができます。

それは私が初心者のために持っているものであり、jQueryスキルを開発するときに、「ミニゲーム」への小さな「更新」をリリースすることでより高度になります。

これが実現可能かどうか、そしてそのようなプロジェクトにどれだけの時間を費やすことができるのか、私はただ疑問に思っていました。

最善を尽くす方法についての提案や情報は素晴らしいでしょう！また、これがjQueryとCSSだけでは難しい方法である場合は、アドバイスをお願いします。:)

CSSスプライトとjQueryを使用して12fpsアニメーションを複製する最も簡単な方法を見つけようとしています。

setInterval（）を使用することを考えていたので、83.33ミリ秒ごとに、次のスプライトがロードされます。

私の問題は、それを行う方法がわからないということです...

私のスプライト名は次のように増分的であるため、私は考えていました。

したがって、最後のインスタンスに到達するまでこれを何らかの方法でインクリメントできれば、この場合はmariohammerswing5.png最初にループバックします。

その部分がわかれば、準備はいいです！:)

助言がありますか？

In http://www.scherer.nl/nieuw (the /nieuw part will be removed when the site is ready) the drop-down submenu's on the left should shift up their background image when hovered over, so the hovered item becomes red i.s.o. orange.
With jQuery I'm using toggleClass to add a class 'hover' to the hovered menu-item.
The CSS makes the background-image shift up, which shows the red part of it.
This works fine in any browser, but in IE8 only the first hovered item is changed and it doesn't change back when the mouse is over an other item. When I put IE8 in IE7-compatibility mode, it does work but then the sub-menu's are shifted to the right and down a bit, anyhow, I don't want to force IE to use compatibility mode.

I've been searching for an answer to this problem for several days now, so maybe anybody here can think of a solution?