ロールオーバーボタンを作成 of Fireworksの効率的な使い方

Fireworksでロールオーバーボタンを作成してみた。覚えてみれば簡単です。
検索しても満足のいく内容のサイトがほとんどありませんでしたので覚書します。

まずこちらのプラグインを活用してボタンを作成しました。


このようなボタンにします



マウス右クリックをして、シンボル化します。


ボタンにチェックを入れてOK
名前はわかりやすくしました。


ボタンシンボルをダブルクリックするとウィンドウが変わります。

アップ：マウスがボタン上にない時
オーバー：マウスがボタン上にある時
ダウン：ボタンをクリックした時
オーバーダウン：クリックした後
ヒット：ボタンとしてのリンクとして機能する領域

このようになります。
アップのタブに現在のボタンが表示されていますが、他のところは空白です。


「アップのグラフィックをコピー」をクリックして、アップのボタンをコピーしましょう。
間違ってアップのボタンそのものでコピーすると、シンボル化したボタンがコピーされるので、アップのボタン変更＝オーバーのボタンも連動して変更されます。


今回はフィルタ→カラー調整→色相・彩度をクリックして、色を変更しました。


同じように、ダウン・オーバーダウンも「○○のグラフィックをコピー」をクリックして、色も変更しました。

ヒットのタブを開きます。


ボタンをクリックするとプロパティにリンクを入力するところが表示されます。
リンクURLを入力しました。
altは画像テキストです。こちらはSEO・ユーザビリティを考慮するなら入力することをおすすめします。
Dreamweaver等での編集時に入力しても大丈夫です。


このようになってます。

ファイル→書き出しをクリックしましょう。
画像が一括で出力されました。

名前保存をサボってるのが丸わかりの画像だな（汗

ロールオーバー作成をしたサンプルページです

写真を保存しよう。パソコンの容量節約（笑


WEB講座でデザインを本格的に学ぼう。時間を自分で調整しやすいのが嬉しい

カスタム検索