DHTML効果からビヘイビアまたはCSSへ移行するには
FrontPageからExpression Webへの移行
マウスに触れたりクリックすると変化を起こすDHTML効果の廃止に伴って、ビヘイビアやCSSへ移行する方法について説明します。
概要
マウスでポイントしたりダブルクリックしたりすると、そのテキストや画像が変化したり動きをつけたりするDHTML効果は、Expression Webで廃止されました。代替として、ビヘイビアを利用する方法、またはCSSを利用する方法があります。
ここではそれぞれの対処方法について説明します。
対処方法
ビヘイビアを利用する
マウスに触れるとその画像を置き換えたりするには、ビヘイビアを利用するとよいでしょう。
- マウスに触れる前の画像と、触れたときに置き換える画像を用意します。
- マウスに触れる前の画像を挿入します。
- [パネル]メニューの[ビヘイビアー]をクリックして、ビヘイビアーパネルを表示します。
- Webページに挿入された、対象となる画像を選択します。
- [ビヘイビアー]パネルの[挿入]ボタンをクリックし、[イメージの入れ替え]をクリックします。
-
[イメージの入れ替え]ダイアログボックスが表示されたら、入れ替えるイメージのURLを指定します。[参照]ボタンをクリックし、入れ替えるイメージファイルを指定します。
- マウスがその画像から離れたときに元のイメージに戻すには、[MouseOutイメージ時に元に戻す]のチェックを付けます。
- [OK]ボタンをクリックします。
CSSを利用する
マウスに触れると文字のスタイルを変更するには、CSSを利用するとよいでしょう。
たとえば、すべてのリンクの文字に触れると背景色をつけるには、以下の手順で行えます。
- [書式設定]メニューの[新規スタイル]をクリックします。
- [新しいスタイル]ダイアログボックスの[セレクター]ボックス一覧から「a:hover」を選択します。
- [定義先]ボックスに、スタイルの作成先を指定します。ここでは「現在のページ」に作成することとします。
-
[背景]カテゴリを開き、[background-color:]ボックスの▼をクリックして、マウスに触れたときの背景色を選択します。
-
プレビュー画面でスタイルを確認して[OK]ボタンをクリックします。