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

ロールオーバーイメージの作成

Shirley's i-box Shiley's little-box JAVA Script sample CSS sample
 

■ イメージの準備

ロールオーバーイメージを作成するには、2種類のイメージを用意する必要があります。一つはロード時及び通常時表示されるプライマリイメージ、もう一つはプライマリイメージにマウスカーソルが重なった時に表示されるセカンダリイメージです。4つのロールオーバーボタンを配置するなら、8つのイメージが必要にまり桝。また、これらは縦横のサイズは同一である必要があり、サイズが異なる場合プライマリイメージにあわせてサイズが自動調整されます。

■ 【ロールオーバーイメージの挿入】ダイアログ

ロールオーバーイメージを配置したい位置にカーソルを置き、【挿入】バーの【一般】カテゴリから【ロールオーバーイメージの挿入】ダイアログを表示します。
【元のイメージ】フィールドボックスには、プライマリイメージを指定します。同様に【ロールオーバーイメージ】フィールドボックスにセカンダリイメージを指定してください。その他、ページにイメージが表示されるまでロード箇所に説明文を表示する【代替テキスト】、ロールオーバーイメージがクリックされた際にジャンプするURLを指定する【クリック時にURLに移動】の設定も必要であれば行っておきましょう。これら2つはプロパティインスペクタでも設定可能です。
最後に【イメージ名】フィールドボックスで名称を入力し、【イメージのプリロード】を有効にすると設定は完了です。【イメージのプリロード】オプションを有効にすると、セカンダリイメージを予めロードしておくので、ロールオーバー時にイメージの表示が遅れるという事態を防ぐことができます。
以上の手順を必要なボタンの個数分繰り返せば設定完了です。
R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box