CSS を使用したナビゲーション テキストの設定、下線、背景色、移動などの一般的なナビゲーション効果については誰もがよく知っています。前回の投稿で、一部のネチズンがウェブサイトhttp://www.tonta.com.cn/について言及しましたが、そのホームページのナビゲーション効果は良好であることがわかりました。フラッシュにはそれほど眩しい効果はありませんが、比較的効果的です。繊細でとても快適に見えます。
何もすることがないので、dw で同じナビゲーション効果を実現しようとします。効果は次のとおりです: http://vip.5d.cn/flood/daohang/1.htm 。
まず、エフェクトの構成を分析します。マウスが上を通過すると、背景が変化し、小さな画像が回転します。わかりました！ dwでの画像の入れ替え（反転画像）+背景画像の変更（CSS定義）の使用を検討してください。これで効果が得られるはずです。
GIF画像を4枚用意します。
マウスが上を通過したときの背景画像 (FW では Nimate を使用すると簡単にグラデーション効果を実現できます。この画像の透明度は 0% から 100% まで徐々に変化します)
[img]/conimages/web/2003-06/bg0604.gif[/img]
マウスを出したときの背景画像（透明度が100％から0％に徐々に変化します）
[img]/conimages/web/2003-06/b0604.gif[/img]
ダイナミックな小さな画像
[img]/conimages/web/2003-06/20604.gif[/img]
小さな静止画（FWで画像形式をgifに設定して保存）
[img]/conimages/web/2003-06/2a0604.gif[/img]
1.背景効果は、CSS を使用して実装され、次の 2 つのクラスを定義します。
.style1 {background-image: url(bg.gif)}
.style2 {background-image: url(b.gif)} は、
マウスが通過したときとマウスが引き出されたときの背景画像として使用されます。次に、次のコードをセルに追加します。
onmouseover="this.className='スタイル1''
onmouseout="this.className='style2'" は、
マウスが通過すると背景のグラデーションが表示され、マウスが離れると消える背景のグラデーションの効果を実現できます。
2.画像反転効果を使用すると、小さな静止画像をセルに挿入し、ビヘイビアーを使用して画像交換効果を追加し、マウスがその上を通過した後に動的な小さな画像に反転するように設定できます。
より近い効果を実現するには、セルに画像反転効果を適用し、静的な小さい画像コード内で次のコードを切り取る必要があります:
onMouseOver="MM_swapImage('Image2','','2.GIF', 1)」
onMouseOut="MM_swapImgRestore()" が
セルコードの td タグに貼り付けられます。
マウスがセルの上を通過するときに画像を反転して、動的な効果を生み出すことができます。
この時点で、すべての効果が得られます。
この例では、dw を使用して得られる効果は、フラッシュによって得られる効果とほぼ同等、またはそれ以上です (マウスがセルを引き出すと背景のグラデーションが消える効果が得られました)。
セクション：
1. FW でグラデーションの背景画像を慎重に作成し (ランダムなグラデーション画像を 2 つ作成しただけです)、ナビゲーション セルを変更すると、効果をより繊細で際立たせることができます。
2.このメソッドを使用してナビゲーション効果を作成する場合は、スワップ効果をコピーできないことに注意してください。
onMouseOver="MM_swapImage('Image3','',') 2.GIF' ,1)"
<img src="2a.gif" name="Image3" width="15" height="15" border="0" id="Image3">
反転画像の名前を別の値に変更するだけです。
3．この例の技術的な内容はそれほど高度ではなく、私はフラッシュにあまり詳しくないので、dw とフラッシュのどちらが使いやすいかわかりませんが、ここでは方法を提供するためにのみ言及します。問題を解決します。
4. 2 つの単純なエフェクトを重ね合わせることで、よりクールなエフェクトを作成できることを皆さんにわかりやすくお伝えできれば幸いです。アニメーションの背景画像を作成する場合、その効果を実現するには、gif アニメーションのループを [いいえ] に設定する必要があります。ループしています (ループしていません)
:)