www.wanichan.com

DHTML効果からビヘイビアまたはCSSへ移行するには

  • このエントリーをはてなブックマークに追加
マウスに触れたりクリックすると変化を起こすDHTML効果の廃止に伴って、ビヘイビアやCSSへ移行する方法について説明します。

概要

マウスでポイントしたりダブルクリックしたりすると、そのテキストや画像が変化したり動きをつけたりするDHTML効果は、Expression Webで廃止されました。代替として、ビヘイビアを利用する方法、またはCSSを利用する方法があります。

ここではそれぞれの対処方法について説明します。

対処方法

ビヘイビアを利用する

マウスに触れるとその画像を置き換えたりするには、ビヘイビアを利用するとよいでしょう。

  1. マウスに触れる前の画像と、触れたときに置き換える画像を用意します。
  2. マウスに触れる前の画像を挿入します。
  3. [パネル]メニューの[ビヘイビアー]をクリックして、ビヘイビアーパネルを表示します。
  4. Webページに挿入された、対象となる画像を選択します。
  5. [ビヘイビアー]パネルの[挿入]ボタンをクリックし、[イメージの入れ替え]をクリックします。
  6. [イメージの入れ替え]ダイアログボックスが表示されたら、入れ替えるイメージのURLを指定します。[参照]ボタンをクリックし、入れ替えるイメージファイルを指定します。
  7. マウスがその画像から離れたときに元のイメージに戻すには、[MouseOutイメージ時に元に戻す]のチェックを付けます。
  8. [OK]ボタンをクリックします。

CSSを利用する

マウスに触れると文字のスタイルを変更するには、CSSを利用するとよいでしょう。

たとえば、すべてのリンクの文字に触れると背景色をつけるには、以下の手順で行えます。

  1. [書式設定]メニューの[新規スタイル]をクリックします。
  2. [新しいスタイル]ダイアログボックスの[セレクター]ボックス一覧から「a:hover」を選択します。
    新しいスタイル
  3. [定義先]ボックスに、スタイルの作成先を指定します。ここでは「現在のページ」に作成することとします。
  4. [背景]カテゴリを開き、[background-color:]ボックスの▼をクリックして、マウスに触れたときの背景色を選択します。
  5. プレビュー画面でスタイルを確認して[OK]ボタンをクリックします。

スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

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

▲このページのトップへ