特定の部分をポイントすると詳細説明が表示されるようにするには

はじめに

ビヘイビアーを利用すると、ある要素にマウスでポイントしたときにさまざまなイベントを設定することができます。ここでは、ナビゲーションメニューをポイントすると、その下にその説明を表示する方法を紹介します。このように説明を表示する位置を設定する場合、絶対配置、配置の順序が設定されたセクションのレイヤーを挿入して、マウスでポイントしたときにそのレイヤーを表示するようにビヘイビアーで設定します。

レイヤーを挿入する

1. あらかじめナビゲーションバーとなるセクション<div>を作成しておきます。<div>を挿入するには、［ツールボックス］パネルの<div>をダブルクリックするか、共通ツールバーの<div>をクリックします。
   
2. 挿入したい場所を選択して、［ツールボックス］の［レイヤー］をダブルクリックし、レイヤーを挿入します。
   
3. 挿入されたレイヤーの幅をマウスで調整します。
4. レイヤーに説明文を入力します。
5. 必要に応じて、レイヤーのスタイルを変更します。
   

レイヤーを非表示にする

1. ［書式設定］メニューの［レイヤー］をクリックして、［レイヤー］パネルを表示します。
   
2. レイヤーの名前を変更するには［ID］フィールド内を右クリックし、ショートカットメニューより［IDの変更］を選択してID名を指定します。
   

   

   
3. ［表示］の設定を［表示しない］に設定します。現在既定の表示になっているので、ショートカットメニューより［表示:表示しない］をクリックします。
   
4. レイヤーが非表示になり、閉じた目のアイコンが左側に表示されました。
   

メニューに触れるとレイヤーが出るように設定する

1. ［書式設定］メニューの［ビヘイビア］をクリックします。
2. ［ビヘイビア］パネルが表示されたら、 対象となる部分を選択します。
3. ［ビヘイビア］パネルの［挿入］をクリックし、［プロパティの変更］をクリックします。
   
4. ［プロパティの変更］ダイアログボックスが表示されたら、［要素を選択する］を選択します。
5. ［要素の種類］には「div」を選択します。
6. ［要素名］ボックスには、レイヤーの名前を選択します。
7. ［表示］ボタンをクリックします。
   
8. ［表示スタイル］では［表示する］を選択して、［OK］をクリックします。
   
9. マウスから離れた時にその説明を非表示にしたい場合は、［MouseOutイベント時に元に戻す］にチェックをつけて、 ［OK］ボタンをクリックします。
   
10. ビヘイビアにイベントが作成されたら、「onclick」イベントの▼をクリックして、一覧から「onmouseover」を選択します。
    
11. onmouseoverに変更されました。
    

問題は解決しましたか？

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください！

▲このページのトップへ