Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

マウスポインタに反応するリンクテキスト

 

 
 

INDEX     PROFILE    WORKS

 

CSSを使うと、マウスポインタに反応して外観の変化するリンクテキストが作れます。反応するのはあくまでテキストなので、派手さはありませんが、手軽にインタラクティブな仕組みを作れます。

■ CSSスタイルの作成

まず、通常通りページをレイアウトします。リンクテキストにはジャンプ先となるURLを設定しておきます。レイアウトが完成したらCSSスタイルを作成します。
【CSSスタイル】パネルから、【新規CSSスタイル】ボタンをクリックし、【新規スタイル】ダイアログを表示します。【タイプ】から【CSSセレクタと疑似クラスの使用】にチェックを入れ、【セレクタ】から「a:hover」を選択します。「a:hover」は、リンクテキスト部分にマウスポインタが重なった場合のスタイルです

■ CSSスタイルの定義

リンクテキストにマウスポインタが重なった場合、そのテキストをどのような状態に変化させるかを【スタイル定義】ダイアログで設定します。
次に【タイプ】カテゴリを選択し、フォントの設定を行います。
さらに、リンクテキストの背景色なども変更します。【背景】カテゴリで【背景色】を設定するだけです。ここで設定する背景色はページ全体のものではなく、あくまでもリンクテキストの背景のみが対照です。すべての設定が完了したら【OK】ボタンをくりくしてダイアログを閉じます。

■ ページプロパティでのリンクテキスト設定

マウスオーバー時以外のリンクテキストのカラー設定は、【修正】メニューの【ページプロパティ】を選択し、【ページプロパティ】ダイアログから行います。【リンク】は何もしていない時、【訪問済みのリンク】は既に訪問したリンク、【アクティブリンク】はリンクがクリックされた時のテキストカラーです。ただし、ページプロパティで設定できるのはテキストカラーのみです。下線の有無やテキスト背景色など、より詳細な設定を行いたい場合は、やはりCSSが必要にまります。設定方法は「a:hover」と基本的に同じで、「a:link」が通常時、「a:visited」が訪問済み、「a:active」がクリック中となります。

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box