0

Rails アプリを 2.3 から 3.2 にアップグレードしている最中ですが、現時点では 3.1 にとどまっています。

現在、画像ファイル名への参照をアセット パイプラインで動作する構文に変換するのに苦労しています。この問題について助けが必要な主な場所は、ボタン ロールオーバーの swapImage ステートメントです。次に例を示します。

<%= image_submit_tag "signin.jpg", {:class => "swapImage { src: '#{image_path('signinHover.jpg')}' }" %>

これは開発中に機能します。しかし、このコードを本番環境にデプロイすると、ロールオーバーはまだ機能しません。明らかなロールオーバー応答がまったく得られません。また、ソースを表示すると、一重引用符がエスケープされたまま表示されます。

<input class="swapImage {src: &#x27;/assets/signinHover.jpg&#x27;}" src="/assets/signin.jpg" type="image" />

これは私の問題の一部かもしれないと思います。

また、アセット パイプラインを使用して javascript/jquery アセットを正しくロードしていないのではないかと考えています。しかし、https://staging.genlighten.com/assets/application.jsを確認すると、swapImage コードが正常に表示されていることがわかります。

アセット パイプラインによって提供される画像の適切な構文を使用して、Rails 3.1 で swapImage を正しく実装する方法についてアドバイスをいただければ幸いです。または、代わりに使用する必要があるロールオーバー ボタン イメージへのより良いアプローチはありますか?

どうもありがとう、

ディーン・リチャードソン Genlighten.com

4

1 に答える 1

0

ここでいくつか修正が必要です。まず、input タグに src 属性があります。これらの 2 つのことは混在しません。これを機能させるには、入力を CSS でスタイリングするか、画像要素をどこかに配置する必要があります。

ホバー時の画像切り替え効果を探しているので、CSS スプライトを使用することをお勧めします。マウスがターゲットの上にあるときに画像を読み込むと、ブラウザがコンテンツを読み込めるまでボタンが完全に消えてしまうため、ユーザー エクスペリエンスが損なわれます。

1,000 万億億個の CSS スプライトのチュートリアルの 1 つをチェックしてください。たとえば、次のようなものです (Goog で最初に見つけたもの)。

http://css-tricks.com/css-sprites/

今。タグ自体に代替ソースを配置し、ホバー時にそれをロードすることに設定している場合は、それを data-attribute に配置することをお勧めします。

<img class="swapImage" data-image-swap="{src: &#x27;/assets/signinHover.jpg&#x27;}" src="/assets/signin.jpg" />

これは入力ではなく画像タグであることに注意してください。入力をどこかに追加する必要があります:/

出力しようとしているコードを投稿できますか? また、それを確認できるように、swapImage() メソッドを含めるとよいでしょう。

繰り返しますが、javascript を使用してホバー効果を発生させるのは悪い習慣です。スプライトを使用することを強くお勧めします。

非常に。:)

于 2013-08-31T22:38:03.703 に答える