問題タブ [image-replacement]

CSS を使用して、次の HTMLのテキスト ( "Word 1 Word2 Word3 Word4" ) を画像に置き換えたいと考えています。テキストと同じように、画像も水平方向にインラインで表示したいと思います。

私はmezzoblueや他のいくつかのサイトからいくつかのテクニックを読んで試してみましたが、これらのテクニックでは、テキストのスパンが単語を作成する 1 つまたは別の要素タイプで囲まれている必要があるように思われるという結論に達しています。横に並ばない。

この目標を達成する方法についてのアイデアはありますか? （可能であれば）スクリーンリーダーなどにソリューションを「アクセス可能」にしたいと思います。

どうもありがとう、
プレンボ。

PS: いくつかの手法を実装しようとしましたが、どれも正しく機能しませんでした: TextReplacement.html

CSS ファイル: TextReplacement.css

sIFR 置換テキストは正常に表示され、通常のテキストは問題なく非表示になります。ただし、私が開発しているサイトにページが読み込まれるたびに、置換されたテキストの読み込みに永遠に (つまり、インターネット時間で永遠に) 時間がかかり、ページ上で垂直方向にジャンプして、最終的に所定の位置に落ち着くまでに長い遅延が発生します。

CSSで画像を置き換えるための最良の(クロスブラウザのような)テクニックは何ですか? スプライトを使用してナビゲーションを行っていますが、マークアップを SEO フレンドリーのままにしたいと考えています。次の HTML 構造を考えると...

CSSのみを使用してテキストを背景画像に置き換える最良の方法は何ですか?

私は現在これを使用しています...

ただし、CSS をオンにして画像をオフにすると失敗します。

私がやろうとしているのは、訪問者がサムネイルのセットをクリックして画像を変更できるようにすることです。ただし、私が直面している問題は、画像の場所をスクリプトにハードコーディングすることを本当に避けたいということです。使用するIDが一致する限り、スクリプトを古いページや画像のセットで実行できるように十分に移植可能にする必要があります。以下を変更して、A、B、またはCのsrcをXのsrcに置き換える方法はありますか？

JS

HTML

jQueryを使用して画像のソースを更新しようとしています。問題は、最初のソースがロード時に設定されているため、imgがサーバー側で実行されていることです。

ASPX/HTMLは次のとおりです。

使用されているサンプルのjQueryコードは、ここまたは以下にあります。

現在、すべての画像ソースは読み込み時に完全です（小さい画像と大きい画像は分離コードを介して読み込まれます）。ただし、サムネイルをクリックしても、サーバー側で実行されているため、大きな画像は変更されません。

これを修正する方法について何かアイデアはありますか？

事前にどうもありがとうございました！何時間も壁に頭をぶつけた後、ようやくタオルを投げました（少なくとも数時間）。

ありがとう！

-アダム

私はこれを思いついたばかりです、それはすべての現代のブラウザで動作するようです、私はそれをテストしました（IE8 /互換性、Chrome、Safari、Moz）

HTML

CSS

プロの：

• 画像の代替テキストがベストプラクティスです-アクセシビリティ/seoの実践
• 余分なHTMLマークアップはなく、cssも非常に最小限です。
• 「テキストインデント」技術が低帯域幅のユーザーからテキストを隠すCSSオン/画像オフの問題を回避します

私が考えることができる最大の欠点は、透明なgifのみを送信するため、css off /imagesonの状況です。

スタイルシートのない画像を使用しているのは誰ですか？ある種の携帯電話か何か？

私はオーストラリアの地方（最寄りの都市から数百キロ）のクライアント向けにいくつかのサイトを作成しています。このサイトでは、多くのユーザーがダイヤルアップ接続に悩まされ、多くの場合古いブラウザも使用されるため、「画像オフ」の問題は重要な考慮事項です。 。

私が考慮していないこのテクニックのその他の副作用はありますか？

編集：通常の画像タグにこれを使用する追加情報を追加したかっただけです。

A.css-spritesを使用できます

B.単一の配列を使用して異なるサブドメイン間で背景画像ソースを交互にするphpでcssを生成できます

C.画像のサイズを変更しても、画像が伸びたり歪んだりしないので、ページ上の他のすべての画像と同じように動作するのが好きです。

画像を置き換える方法の可能なすべての組み合わせを試しましたが、機能する解決策は見つかりませんでした。

問題のあるコードをここにアップロードしました：http：//dl.dropbox.com/u/2959730/index.html

ソースをダウンロードしてコードを試すことをお勧めします。問題は、＃playButt imgにアタッチする必要があるplayer.playPause（）関数にあります。

私が今何時間も苦労しているのを手伝ってください！

編集：

私はすべてを修正しました。提案に従って、現在このコードをplayPause（）に使用していますが、それでも機能しません。。これは私が今まで扱った中で最も苛立たしいことです...

ラジオボタンを画像に置き換えたいのですが、これがシステムによって生成されるHTMLです。

jqueryスクリプトで、ラジオ入力のタイトルテキストに特定のキーワードまたは文字が含まれているかどうかを確認し、それに応じてそのラジオボタンを置き換えます。

たとえば、ラジオボタンにキーワード-'Small'、'small'、または's'が含まれていることがわかった場合は、このボタンを<a>cssで画像にスタイル設定されるこのタグに置き換えます。

これは、キーワード-'Medium'または'medium'が見つかった場合も同じです。

これが私が立ち往生しているjqueryです、

以下は私がこれまでに出したスクリプトです...

それを作るためのアイデアを教えてください...ありがとう。

このページのラジオボタンの代わりにjQueryを使用しています-http: //www.justdoors.co/product-selection/マウスオーバー効果も追加できるかどうか疑問に思っていましたか？

選択すると緑色に変わる灰色の矢印が、ユーザーがリストを上下に移動するときにマウスオーバー/ホバーで緑色に変わるようにしたいと思います。