オーバーダウンとは？

講師の真喜志です。
Fireworks歴はバージョン１以前のベータ版から使っていますので、かれこれ１０年以上になります。

いつから（最初から?!）だったか、「シンボル」という機能が使えるようになり、Fireworksの使い勝手は飛躍的に向上しました。

シンボルにはいくつかの種類がありますが、その中に「ボタンシンボル」があります。
ボタンシンボルには、4つのシチュエーションによって異なるボタンのデザインを、ひとまとめにして格納しておくことができます。

異なるシチュエーションとは下記の通りです。

1. アップ　　　　　　・・・素の状態
2. オーバー　　　　・・・マウスカーソルが乗った状態
3. ダウン　　　　　　・・・クリックされた状態
4. オーバーダウン・・・？？？

最後の4。これが問題です。
この機能が実装された際には理解していたつもりでしたが、長年使わない間にすっかり忘れてしまいました。

そこで、授業のテキストとして使わせていただいている書籍『Fireworksレッスンブック』（渥美聡子さん著／ソシム刊）の解説を読んでも・・・チンプンカンプン（失礼）！

一回クリックしたダウン状態のボタンからマウスポインタを離し、もう一度マウスポインタで触れるとオーバーダウン状態になります。「一度選んでみたけれど、もう一回同じボタンをクリックしようとしている」ことがわかるようになります。

そこで、いったいどういう状態なのか、実際にボタンを作りこんで検証してみることにしました。
まずわかったこと。
オーバーダウンを説明するのに、ボタン単品では理解できません。
複数のボタンが並んでいる状態でないと、難しいです。

では、図解でどうぞ！
図では「コース・カリキュラム紹介」というボタンが変化しています。
他のボタンと見比べてみてください。

1.アップ（素の状態）


2.オーバー（マウスカーソルが乗った状態）



3.ダウン（クリックされた状態）


4.オーバーダウン


オーバーダウンとはつまり、ダウン状態がキープされている（マウスカーソルを離してもアップ状態に戻らない）ことが前提で、そこへ再度マウスを乗せた際のオーバー状態を定義することを言うらしいです。

図解すれば理解しやすくなるかな・・・と思ったんですが、やっぱり動作サンプルがないと完全にはご理解いただけないかもしれない、という不安に駆られてきました。

ということで、下記にFireworksから書き出されたままの状態のHTMLと、制作に使用したPNGファイルを格納しましたので、ご参照ください。

• 動作サンプルHTML
• 動作サンプル元ファイルPNG