ナビゲーションに多くのロールオーバー画像があるサイトのプロトタイプに取り組んでいます。各イメージは一意ですが、ロールオーバーとロールアウトのコードは同じです。すべてのロールオーバーに使用できる単一のシンボルを作成しようとしていますが、作業が大幅にスピードアップするため、これを理解するための助けが必要です.
擬似コードは次のように機能すると思います
- デフォルトのロールオーバー イメージを含むシンボルを作成します。
- シンボルに、ロールオーバーとロールアウトのコードを追加します。これは透明度を 0 -> 100 とその逆に調整します。
- ナビゲーション内の各アイテムの上にシンボルのインスタンスを作成します。
- インスタンスごとに、使用するロールオーバー イメージの名前を含む変数を設定します。
- そのシンボル インスタンスで、変数値を取得します。
- そのシンボル インスタンスで、変数内のイメージ名を使用して、既定のイメージを置き換えます。
質問: 手順 4 ～ 6 を機能させるにはどうすればよいですか? 1～3台は問題なく動いています。
更新: #6 を解決しました
画像はすべて、 old-school ではなく CSS background-image プロパティによって管理されます<img src=...>。したがって、要素の画像を設定するための構文は次のとおりです。
$(sym.lookupSelector("[ElementName]")).css('background-image', [image]);
そして、[画像] を正しくする第 2 の部分があります。
- Edge イメージのデフォルトの相対 URL を使用します。
images/[image] - CSS background-image の標準構文を使用します。
url(images/[image])
PS 私の最後の開発作業は、Director、PHP、および ColdFusion でした。関数、オブジェクト、インスタンス、継承などの使用などの基本原則はまだ得ていますが、言語は変更されています。そして、私はDOMの経験がほとんどありません。
付録: これを手動で行う方法
選択されていないすべての状態を示すナビゲーションの背景画像があります
nav の各項目には、対応するロールオーバー イメージがあり、一連の要素が nav 要素の上に重ねられています。各ロールオーバーの不透明度は、最初は 0% に設定されています。
各イメージ要素には、ロールオーバー、ロールアウト、およびクリック トリガーがあります。ロールオーバー トリガーとロールアウト トリガーは、それぞれ同じです。クイックフェードを提供するロールアウトを備えたコードももう少しあります。これは、同じコードをたくさんコピーすることを意味します。そのコードの一部を変更しなければならないことについて考えるのは嫌いです。