■チュートリアルのトップへ　>> Fireworksトレーニングのトップへ　■コラムのトップへ　■オリジナルプロダクト　■制作料金
スライスでロールオーバーボタンを作る
Fireworksで画像をスライスできることは、このページで述べましたが、スライス機能の本当の実力はリンクとロールオーバー機能にあるといってよいでしょう。
ロールオーバーとはJavaScriptを使って、マウスアップ（マウスが画像に重なっていない状態）/マウスオーバー（マウスが画像に重なった状態）によって画像を差し替える機能です。
まず、ボタンを3つ作ります。次に新しいフレーム（フレーム2）に複製を作り、ボタン位置を下げ、エフェクトの効果を若干変更しました。
フレーム1は通常の状態（マウスアップ）で、フレーム2ではマウスオーバーの状態になります。マウスオーバー時にボタンが少し押し込まれるような設定です。


先にリンク先を登録しておきます。URLツールバーで新規リンクの設定を行います。


新規リンクあるいは
リンクの編集を選択すると右のパレットが現れます。

リンク先のアドレスをここで登録しておきます。WebのURLもローカルのパスも両方とも可能です。

ブラウザのステイタスバーにメッセージを入れたい場合もここで設定できます。


次に、URLパレットからスライスツールを使って、分割（スライス）の設定を行います。




スライス設定を行うと、下のようなオブジェクトプロパティが現れるので、ここに先ほど登録していた、リンク先のアドレスを選択します。そしてスライススタイルから「ロールオーバー」を選択する。「イメージ」のままだと画像が変化しないので注意しましょう。

さらに画面の下の方では分割された画像のファイル名も設定することができます。


全てのスライス設定をおこなえば、あとはスライスを書き出すだけです。


スライスの設定は、ファイルメニューの［スライス書き出し］で行いますが、その前に［スライス時のデフォルト］で書き出し時の画像の設定を行います。設定を終われば「設定のみ保存」をクリックします。
［スライス書き出し］を選択すると、書き出すHTMLのファイル名と、画像ファイルを格納するフォルダの名前をつけることができますので、必要な項目を入力して書き出します。

書き出されたHTMLファイルはこちらです。

どうですか、ちゃんとJavaScriptによる
ロールオーバーのボタンが生成されていましたね。
　
Fireworks4からは、さらに簡単にロールオーバーの設定を行う事が可能になりました。

また、スライスで書き出したHTMLファイルもDreamweaverならば、FireworksのHTMLをそのまま挿入することができますので、色々なデザインを自由に設計する事ができますよね。
　
　　

このWEBサイトに掲載されている文書・画像・映像・写真等の著作権はSilicon Cafe'に帰属し、許諾なく 複製・頒布を行うことは 法律で固く禁じられています。 Copyright (C) 1995-2003 Silicon Cafe'. All rights reserved