|
前ページでは、イメージ全体が変化するロールオーバーを作成しましたが、今回はせっかく[スライス]ツールを使用しているので、1つの画像をスライス(分割)して、ロールオーバーを行う設定をやってみましょう。
上図左が、フレーム1に作成されたイメージで、ブラウザでマウスがイメージに重なっていないデフォルトの状態です。上図右は、マウスがイメージに重なった時に表示するイメージで、フレーム2に描画します。
今回は、この画面を三分割して、それぞれにロールオーバーの設定を行って行きます。
前回同様に[ツールボックス]から[スライスツール]を選択して、画面を分割します。
分割の方法はスライスオブジェクトでそれぞれのオブジェクト同士が重なりなわないように、かつ隙間が空かないように、スライスオブジェクトを描きます(配置します)。
スライスオブジェクトによる画面分割は、水平・垂直の直線でなければ画面を分割できないので注意しましょう。
今回は、下の部分を1つ。上の部分を左右に1つずつ、合計3つの分割を行いました。
次に、それぞれのスライスオブジェクトに対して、詳しいスライス設定を行います。前ページと同様に、スライスオブジェクトを選択して、[スライス]パネルを使って、それぞれのスライスのプロパティ(属性)を設定します。
今回は、リンク先のURLの設定や、分割された画像ファイルのファイルネームもここで設定してしまいます。それぞれの3つのスライスオブジェクトの設定は、以下の通りです。
スライスオブジェクトの設定を終えたら、[ビヘイビア]パネルを使って、アクションの設定を行います。
「+」ボタンをクリックすると、プルダウンメニューが現れますので、ここで「シンプルロールオーバー」を設定します。
さて、今回はさらにビヘイビアを追加してみることにしましょう。今回追加するビヘイビアは「ステイタスメッセージの表示」です。ステイタスメッセージとは、ブラウザの左下部分に表示されるメッセージのことです。
スライスオブジェクトを選択して、「+」ボタンをクリックして「ステイタスメッセージを表示」を選択します。
このアクションを選択すると、以下のようなダイアログボックスが表示されますので、ここに表示させたいメッセージを入力します。

追加されたビヘイビア(ステイタスメッセージを表示)は、[ビヘイビア]パネルの中に表示されます。
ビヘイビアの内容を変更したい場合は、パネルの中のビヘイビアを選択してダブルクリックすれば、再びダイアログボックスが表示されますので、そこで変更を行います。
今回追加したビヘイビア(ステイタスメッセージを表示)に関しては、マウスイベントをonMouseOver以外にも設定することが可能です。
ビヘイビアの設定を完了し、スライスで書き出したものが、下のイメージです。このイメージは3つの画像のよって構成されており、テーブルタグを使って、正確に再現されています(この方式は旧バージョンと同じ)それぞれの画像ファイルには、ローローバーとステイタスメッセージ表示のJavaScriptが仕組まれており、ロールオーバーしたイメージをクリックすると、指定されたURLにジャンプします。
|