問題タブ [css-sprites]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - CSSスプライトヘルプ
私はもともと次のコードを使用していました：
問題は、それをスプライトに変換するときに、背景の位置が固定されていることです。たとえば、0px-400pxです。
では、どうすれば左下に配置できますか？
また、cssスプライトでbackground-repeatを使用できますか？
お時間をいただきありがとうございます。
jquery - 画像を変更するjQueryトグル
画像を含む div のリストがあります。
ユーザーが div をクリックすると、画像が x-on.png に変更され、もう一度クリックすると x-off.png に変更され、3 回目にクリックすると x に戻ります。 png.png
画像の変更ごとに jQuery を手動で指定せずにこれを行うことは可能ですか? div をトラバースして画像名を見つけ、単に -off/-on を画像に追加できますか?
ありがとう！
css - jQuery Superfish メニュー プラグインを使用した IE7 での Z インデックスの問題
メニューに画像を使用できるように、jQuery Superfish メニュー プラグインを変更する必要がありました。
Om oss と Medieomtale の下にサブメニューがあります。このメニューにはスプライト画像を使用しました。
IE8 や FF などでは正常に動作しますが、IE7 ではサブメニューを表示するのに問題があります。サブメニューが表示されますが、サブメニュー内を移動しようとするとフェードアウトします。
編集者注
問題を実証するためのこの質問のリンクは、www.okadadesign.noアクセスできなくなったため、削除されました。
javascript - FireFox 3.5は画像スプライトを繰り返しフェッチします-防ぐ方法は？
編集：Mozillaはバグを修正しました。このスレッドは死んでいます。
編集：これはMozillaのバグです。このスレッドを参照してください：https ：//bugzilla.mozilla.org/show_bug.cgi？id = 501853
ここに画像に使用するスプライトがあります：http：//www.trailbehind.com/site_media/images/sprite.png
FireFox 3.5では、マップにアイコンをレンダリングするたびにスプライトがフェッチされるようです。このページを読み込んだり、マップをパンしたりすると、Firebug Net Panelで動作を確認できます：http：//www.trailbehind。 com / node / 1148091 /
以前はInternetExplorerでこれと同様の問題が発生していましたが、最終的にはSafari 3/4、FF 2/3、およびIE6/7/8でこれが機能するようになりました。さて、FF3.5で何かがおかしいです:(
このコードをドキュメントのに入れて画像をprec-cacheしようとしましたが、役に立ちませんでした。
後でマップマーカーを作成する（そしてスプライト画像を再度フェッチする）コードは次のとおりです。それはGMapsに関連している可能性があります-左側に各アイコンや他の画像を描画するためのスプライトをフェッチしていないようです...マップだけです。
html - 送信ボタンでcssspriteを使用できますか
送信ボタンにcssspritesを使用したい理由は2つあります。
- 動的にボタンを作成しましたが、将来的にはローカライズされる可能性があります
- ページに5つのボタンがある場合でも、HTTPリクエストを1つだけにしたい
問題は、ボタンのJavaScriptを避けたいのでinput、タイプのフィールドを使用する必要があることimageです。他のcssspriteの場合と同じように、このフィールドに背景画像を設定できます。
問題は、画像ソースを空のピクセルに設定する必要があることに気付いたということです。そうしないと、壊れた画像アイコンが表示されます。
そうは言っても、これは私が思いついた最良の解決策です：
（このファイルをブラウザに直接ロードすることができます-私はランダムなサイトから画像を借りています）。
ある程度は問題なく動作しますが、古き良き友人のpixel.gifを使用する必要があります。とても懐かしい！
壊れた画像のテキストとアイコンを非表示にする方法がcssにない限り、javascriptなしでより良い方法はおそらくありません。
css-sprites - WebアプリケーションでCSSスプライトを使用する利点は何ですか？
トラフィックがかなり多いWebサイトで作業しており、CSSスプライトを使用してデザインの画像の読み込み回数を減らすことを検討しています。
送信されるデータの量を減らす以外に、CSSスプライトを使用することに利点はありますか？本当にどれだけのスペースを節約できますか？スプライトを使用することがWebサイトにとって価値のあるものになるしきい値はありますか？
更新：ご回答ありがとうございます。それらは明らかにすべて非常に注意深く考えられており、あなたのポイントを検証するための良い情報源を提示しています。私は今、私のサイトデザインでCSSスプライトを使用することについて情報に基づいた決定を下すことがはるかに可能だと感じています。
internet-explorer-6 - CSS スプライトと IE6
IE6 は css-sprite をサポートしていますか?
youtube - クリック可能な領域に CSS 背景画像 (スプライト) を作成する方法は?
YouTubeの例で。
彼らのロゴは、実際には他のグラフィック要素を含む大きなマスター イメージから来ています。ただし、サイトのルートを指すロゴをクリックすることはできます。私は彼らの HTML を調査していますが、どうやってそれを達成したのかはまだよくわかりません。
誰かそれを見て説明してもらえませんか？
css - 奇妙な CSS の動作 (ロールオーバー付きのスプライト ナビゲーション)
問題のナビゲーション画像は次のとおりです。
http://img.skitch.com/20090807-t8e6d9ymrtpdifqy88xpu6x36.png
私がやりたいことはかなり基本的なことで、過去に何度もやったことがありますが、なぜ今うまくいかないのか理解できません。基本的に上記の画像をナビゲーションの背景として使用し、それに応じて幅と背景の位置を調整します。これが私のCSSです：
そして、これは、将来の校正のために指定された、一般的な HTML5 doctype <!DOCTYPE html> を使用したページ上のコードです。
私が遭遇した奇妙なことは次のとおりです。最初のタブであるホームは完全に機能します。残りの 4 つのタブは、!important を指定しない限り、最初の background-position プロパティに従いませんが、ロールオーバーは問題なく機能します。それぞれ、これら 2 つの状況の画像を次に示します。
http://img.skitch.com/20090807-fybag852bbbi6ut751w167y1hp.png
http://img.skitch.com/20090807-rmn9b2tu54q4agyta2idfra5x5.png
この（できれば）単純な問題について少し洞察を探しているだけです。前もって感謝します！
html - 背景画像を作成して、含まれる要素に合わせてサイズを調整するにはどうすればよいですか?
このサイトのメイン タブの丸みを帯びた角を確認してください。これらは幅 440 ピクセルの背景画像ですが、丸みを帯びたエッジを失うことなく、含まれる要素に合わせて調整されます。