製造原理
スワップ画像を作成する原理は、Dreamweaver の動作パネルに適用されるツール Swap image です。あるボタン画像上にマウスを置いたとき、ボタン自体に画像の交換(黄色の文字が入った絵に交換)を実現させると同時に、ポインタ画像の交換(を指すポインタに交換)を設計するように設定します。現在のボタン ポインターの画像) を使用して、上記の効果を実現します。
^-^: 実際、Web ページ上のいくつかの点は非常に謎めいているように見えますが、根本的には、数枚の写真または数枚のレイヤーを単純に変更しただけです。
クラフト材料
ここで示しているのは 7 つのボタン画像の反転であるため、図に示した効果を実現するには、14 個のボタン画像と 7 つのポインター画像の合計 21 枚の画像を作成する必要があります。このうち、前方の7つのボタン絵はそれぞれB1-1~B1-7、背景の7つのボタン絵はそれぞれB2-1~B2-7、7つのポインタ絵はそれぞれZ1~Z7と名付けられ、それぞれのポインタがボタンを指している。 1から7まで。ボタン画像はFireworksなどの画像作成ソフトを使用して作成できます。
準備方法
1. Web ページファイルを作成します。
2. 7×2 の表を挿入し、表の左列を結合してポインター画像を挿入します。右側の 7 つのテーブルは、ボタン画像を挿入するために使用されます。
3. 最初のポインター画像 Z1 を左側の表に挿入し、青色のフロント ボタン B1-1 ~ B1-7 を右側の 7 行のセルに挿入します (効果を図 2 に示します)。
4. 「ウィンドウ (Windows) → 動作」をクリックして、動作パネルを表示します。
5. 動作を設定する最初の画像を選択します。これは、「Guiding Idea」と書かれたボタン画像です。画像 B1-1 です。
6. プラス ボタンをクリックし、ポップアップ メニューで [画像の交換] を選択して、画像の交換ダイアログ ボックスを表示します。設定の主要部分はこのダイアログ ボックスで行います。
7. ダイアログ ボックスの参照ボタンをクリックし、ボタン イメージを反転する先のイメージを選択します。この場合は、黄色のテキストが付いたボタン イメージ (イメージ B2-1) です。次に「OK」をクリックします。
8. 手順 6 を繰り返し、画像のテキスト ボックスでポインター画像 Z1 を選択し、参照ボタンを再度クリックして最初のポインター ファイル Z1 に反転します。 「OK」をクリックします。以上の操作を完了した後の動作パネルの表示結果は図 3 のようになります。
9. 2 番目のボタン画像 B1-2 を選択し、上記の方法に従ってボタン B2-2 に反転し、ポインタ画像を 2 番目のポインタ画像 Z2 に反転します。
10. 上記の手順に従って、以下の 5 枚の画像を画像交換の動作に設定します。
11. F12 を押して、各画像の上にマウス ポインタを置きます。どうでしょうか。