問題タブ [image-replacement]

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.

0 投票する
1 に答える
1766 参照

html - H1 画像置換によるセマンティック ロゴ ... クリックする必要はありませんか?

左上に大きな会社のロゴがあるサイトをコーディングしています。

そのため、背景画像としてロゴ、H1 に会社名を使用してコーディングし、画像置換技術を使用して H1 を非表示にします。

しかし、サイトの残りのナビゲーションには「ホーム」リンクはありません。ロゴはおそらく「ホーム」リンクを意図しています。しかし、セマンティック/イメージ置換技術により、クリックするものは何もありません。

この状況であなたはどうしますか?ロゴの上に透明なものを配置するのが最初の考えですが、他の提案を聞きたいです.

0 投票する
1 に答える
225 参照

html - CSSイメージの置換がMSIE7および8で機能しない

IE 7および8で空のスパンのcss画像置換技術を使用する際に問題が発生しました。ロゴ(透明なpng)がありません。負のテキストインデントと関係があると思いますか?他のすべてのブラウザで問題なく動作します。どんな助けでも大歓迎です!

0 投票する
1 に答える
1240 参照

jquery - スクロール位置に応じたjqueryの画像置換は、最初のロード後にのみ正しく機能します

私は横スクロールのウェブサイトを持っており、スクロール位置に応じて画像を置き換えています。最初の画像スワップの時間になると、スクロール中にページを最初にロードすると、画像が消えてから再び表示されます。その後、問題は消えます。以下は私のjqueryコードです:

画像がプリロードされていないためですか、それとも私のコードに問題がありますか?

テストサイトはこちらhttp://karpouzaki.com/fade/

どんな助けでも大歓迎です。

ありがとう

0 投票する
1 に答える
2086 参照

css - 背景画像とのリンク

それぞれに画像テキストとホバー状態のボタンが10個あります。私がやりたいのは、background-position、width、height を使用して背景画像のスプライトの一部のみを表示し、hover background-position を使用してホバー スタイルを表示することです。また、要素に画像置換クラスを使用して、アクセス可能でインデックス可能な状態を維持できるようにします。

だから(測定はランダムです):

[CSS]

[HTML]

私が知りたいのは、それがこれを行う良い方法なのか、それとも別の方法で行うべきなのかということです:

<a href="someLink.html"><img src="image.png" width="200" height="30" alt="Button 1"/></a>

次に、ホバー時に JavaScript で画像を入れ替えます。

アクセシビリティとロボットに関して、この 2 つに違いはありますか?

ありがとうございました。

0 投票する
1 に答える
4328 参照

jquery-mobile - jQueryMobile-CSSRetina画像の置換

jQueryMobileで実行されているモバイルサイトがあります。非網膜(高ピクセル密度のないデバイス)デバイスの標準画像が欲しいのですが、それらの画像を、高ピクセル密度のデバイスで表示したときに元のサイズの2倍のRetina(高ピクセル密度)画像に置き換えたいです。私はここでこの記事を見つけました:http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/

実装用のjQueryは、を含む画像を検索し、標準の画像をファイル名に追加されclass="replace-2x"た同じパスの画像に置き換えます。@2xしたがって、Retinaデバイスでlogo.pngはに置き換えられます。logo@2x.png私のjQueryは次のようになります。

ただし、ページが読み込まれると、この関数は呼び出されないか、機能しません(どちらか一方)ので、$(".page").live('pageinit', function() {代わりに何かが必要かどうか、またはページが読み込まれたときに関数が起動または「機能」するようにするために何が必要かわかりません。ヘルプ??:)

0 投票する
1 に答える
225 参照

css - Firefox の画像置換でテキストが非表示にならない

FlexSlider の古いバージョン (v1.4、主に新しいバージョンをまだテストする時間がないため) を使用していますが、何らかの理由で、コントロールのテキストが Firefox に表示されます。

問題

これは矢印の CSS です。

周りを変えてみtext-indentたのですが、結果的に文字が動かない。text-align: leftFirebugで変更したときは問題ではないようです。この問題は Chrome では表示されません。

テキストが非表示にならないのはなぜですか?

0 投票する
1 に答える
739 参照

css - html5ボイラープレート画像の置換がここで機能しないのはなぜですか?

http://jsfiddle.net/hydroplane/r4Kn6/

その「reblog」テキストを画面の外に移動する必要があります。h5bp .irクラスがここで機能しない理由を誰かが知っていますか?

0 投票する
2 に答える
2998 参照

html - CSS を使用して画像とテキストを交換する (写真を含む)

皆さん、インターンシップで頭がいっぱいになりました。Wolfram Alphaの元部門長であるコンピュータ理論の教授でさえ、実際には何の有用な情報も教えてくれません。他に役立つサイトが見つからないので、あなたの指示だけでこの一連の Web ページの作成に着手しなければならないようです。

教室環境に統合したさまざまなテクノロジを説明するページをまとめています。画像にカーソルを合わせると、より大きな画像がポップアップするという意味で、このようなCSS 画像ギャラリーを使用したいと考えています。

ただし、iframe 内の画像とそれに付随するテキストおよびリンクを交換できるようにしたいと考えています。これが私の言いたいことの実例です。マウスを左側のギャラリーの写真の 1 つに合わせると、画像、その下のテキスト、およびその左側のテキスト ボックスの情報が変更されます。私の考えは、必要なすべての情報を iframe 内に表示して、その技術に関連するすべてを 1 か所で取得できるようにすることです。

「Podium Components」の下のボックスがiframeになります。Web開発クラスでCSSを利用してWebサイトを構築したので、画像の交換はCSSで実行できることを知っています(Wolfram Alphaの先生:D)

可能であれば、これには Java や JavaScript を使用せず、純粋な CSS に固執したいと思います。ウェブサイトに使用している CMS は Drupal であるため、すでにかなり複雑になっています。JavaScript をミックスに投入すると、奇抜になりすぎます。

追記として、私はプロジェクトに取り組んでいるときに、StackOverflow を使用することにいつも罪悪感を覚えます。だまされているように感じます:/。そのため、チュートリアルを参照していただくか、必要な場所にたどり着くための検索用語を教えていただければ幸いです。より市場に出られるようになるために独学を手伝ってくれますか? :D よろしくお願いします!

0 投票する
1 に答える
591 参照

javascript - ホバーを使用して、JavaScriptを使用して別のdivのテキストの変更を促すにはどうすればよいですか?

ですから、左側にフォトギャラリーがあるこのウェブページを作成しました。理想的には、その上にカーソルを合わせると、右に膨らむ画像が変更されますが(これは変更されます)、サムネイルの下のボックス内のテキストも変更されます。このガイドを使用して、私は以前に指示され、構築を開始しました。

すべての名前を変更した場合でも、そのフォーラムのコードではすべてが正しく機能します。しかし、ギャラリーに必要なテーブル内のdiv内に配置すると、壊れているようです。テキストは、私がデフォルトとして設定したものから変更されることはありません。個々のdivのマウスオーバーに応答するようにヘッダーの実際のスクリプトを変更しようとしましたが、それでもうまくいかなかったようです。

document.getElementById()。innerHTMLを正しく使用していますか?私が考えることができる唯一のことは、スクリプトを変更するとスクリプトが壊れたこと、または画像を識別するJavaScript divを出力テキストボックスとは異なるdivに配置することで、不幸にしたことです。誰かが私を正しい方向に向けてくれませんか?

0 投票する
2 に答える
152 参照

javascript - 私のウェブページのJavaScriptがIE9で機能しない理由はありますか?

このページを画像ギャラリーとして作成しました。画像にカーソルを合わせると、画像の拡大版が表示されます。小さい画像の1つをクリックすると、その上の大きい画像がその画像に変わります。ChromeとFirefoxでうまく機能しますが、何らかの理由でIE9では大きな写真は変更されません。何か案は?