Skip to main content
慶加46117805
Participant
4月 29, 2022 4:07 午前 UTC
解決済み

ページのフェイドイン、フェイドアウト

ビヘイビアーのフェイド効果を使ったページのフェイドアウト、フェイドイン効果を出したいのですが、どう操作すればいいですか?

    このトピックへの返信は締め切られました。
    nmatsuo5解決!
    Inspiring
    5月 1, 2022 9:47 午前 UTC
    現在は様々な手法があると思いますが、Dreamweaverのビヘイビアーに限って設定するのであれば、以下のような形を試してみてください。
     
    1. DreamweaverでHTML書類を開き、「デザイン」ビューにします。
    2. 画像の表示、非表示を切り替えるボタンをリンクで作成します。
    3. 画像を配置し、その画像のID、もしくは、それを含むdivタグにIDを命名します。
     
    コードは以下のようになると思います。
    <a href="#" >表示・非表示 切り替え</a>
    <div id="targetElement"><img src="yourimage.jpg"></div>
     
    「デザイン」ビュー上で作成したリンクボタンを選択し、ビヘイビアパネルの+ボタンをクリックして「効果>Fade」を選択します。
    設定ダイアログが表示されたら、「ターゲットエレメント」をプルダウンして先ほど作成したIDを選択します。
    「可視性」をここでは「toggle」にし、ボタンをクリックする度に画像が表示されたり消えたりするようにします。
    「OK」を押すと設定が確定するので、aタグに対してイベント onClick が設定されているか確認してください。
     
    書類を保存してブラウザでプレビューし、動作を確認します。
     
    IDはHTML内で1つしか使えないので、「複数箇所を同時に非表示にする」ような使い方には向かないかもです。
    切り替えボタンはリンク以外にも設定可能ですので、色々試してみてください。

    返信数 3

    慶加46117805
    Participant
    4月 29, 2022 7:07 午前 UTC

    正確には、ページの画像のフェードイン・フェードアウトかもしれません。

    翻訳
    nmatsuo5解決!
    Inspiring
    5月 1, 2022 9:47 午前 UTC
    現在は様々な手法があると思いますが、Dreamweaverのビヘイビアーに限って設定するのであれば、以下のような形を試してみてください。
     
    1. DreamweaverでHTML書類を開き、「デザイン」ビューにします。
    2. 画像の表示、非表示を切り替えるボタンをリンクで作成します。
    3. 画像を配置し、その画像のID、もしくは、それを含むdivタグにIDを命名します。
     
    コードは以下のようになると思います。
    <a href="#" >表示・非表示 切り替え</a>
    <div id="targetElement"><img src="yourimage.jpg"></div>
     
    「デザイン」ビュー上で作成したリンクボタンを選択し、ビヘイビアパネルの+ボタンをクリックして「効果>Fade」を選択します。
    設定ダイアログが表示されたら、「ターゲットエレメント」をプルダウンして先ほど作成したIDを選択します。
    「可視性」をここでは「toggle」にし、ボタンをクリックする度に画像が表示されたり消えたりするようにします。
    「OK」を押すと設定が確定するので、aタグに対してイベント onClick が設定されているか確認してください。
     
    書類を保存してブラウザでプレビューし、動作を確認します。
     
    IDはHTML内で1つしか使えないので、「複数箇所を同時に非表示にする」ような使い方には向かないかもです。
    切り替えボタンはリンク以外にも設定可能ですので、色々試してみてください。
    翻訳
    慶加46117805
    Participant
    5月 7, 2022 7:21 午前 UTC

    nmatsuo5さん、アドバイス有難うございます。

    HTMLの知識がないので、少し難しそうですけど、トライしてみます!

    翻訳