リンクボタンの画像にマウスのカーソルをもっていったら画像の色がかわったり
画像をクリックすると ボタンがへこんだようになるものを見かけたことがあると思います。
これは ロールオーバーというJavaScriptの技術を使っています。
例えば こんな感じです。 このボタンにカーソルをあわせると色が変わります。
しくみを簡単に説明すると、２つの画像 A と B があって
● 通常の状態 Aの画像からマウスのカーソルがかさなると
Bの画像に入れ替わるという命令
● 画像にカーソルがかさなった状態 Bの画像から
カーソルが離れると Aの画像に戻るという命令
この ２つの命令文が指定されています。
さて これらの命令文をメモ帳などのテキストエディターで入力するとなると
かなりややこしいし 時間も手間もかかってしまいますので、
ここは ホームページビルダーなどの ホームページ作成ソフトを利用すると
いいでしょう。 そのほうがミスもありませんからね。
各種ソフトによるロールオーバーの指定は それぞれのマニュアルや
ソフトの解説をしている本などを参考にしてください。
● ソフトウエアを活用しよう！ ホームページ作成ソフトを使ってロールオーバーを指定すると
html文章の <head> ～ </head>内に JavaScriptのスクリプト言語が
だらだらだら～～～っと勝手に設定され なおかつ訪問者が行うアクションに
ついての設定（onMouseOver とか onMouseOutとか）も同時に行われます。
さらにさらに リンクのボタンはひとつではありませんね。
例えば ボタンが５つあったらそれぞれに名前をつけて
それぞれの動きを制御する設定を 自動的にしてくれます。
ホントに便利ですね。
ロールオーバーの設定で発生させるその他の主なイベントには
つぎのようなものがあります。
| onMouseOver |
通常の画像から カーソルが重なったとき |
| onMouseMove |
カーソルが対象の画像上で動いたとき |
| onMouseOut |
カーソルが重なった状態から離れたとき |
| onMouseClick |
マウスで画像をクリックしたとき |
| onMouseDblClick |
マウスで画像をダブルクリックしたとき |
| onMouseDown |
マウスのボタンが押されたとき |
| onMouseUp |
マウスのボタンが離れたとき |
ホームページビルダーの場合は onMouseOver と onMouseOut の設定ができます。
また PhotoShopやFireworksなどの画像処理ソフトにも
ロールオーバーを作る機能がついているものがあります。
画像処理ソフトですので ボタン自体を作ることはもちろん
同時にHTMLファイルまで書き出してくれます。
下の画像は Fireworksで作りました。 カーソルをあわせたり
クリックしてみたり クリックしたあともカーソルを動かしてみてください
FLASH を使うと ボタンを制御するイベントに
音を入れることも可能です。 下の画像は クリックすると
音がでるように設定しています。
あなたは どんなリンクボタンを作りたいですか？
● ロールオーバーを指定するときのポイント
ロールオーバーのリンクを指定する場合 気を付けて欲しいことは、
訪問者が何らかのアクションを起こしたとき 明らかに画像が変わったことを
解って貰うような配慮が必要です。 色が変わる とか ボタンがへこむなど
はっきり解るような画像を選ぶようにしましょう。
また 変更前と変更後の画像の大きさは揃えておきましょう。
ソフトウエアで設定した場合 画像の大きさがたとえ違っていても
最初に読み込まれた画像の大きさで表示されるようです。
● ロールオーバーのデメリット
見た目にもインパクトがあって かっこいいロールオーバーですが
もちろんデメリットもあります。
これは JavaScriptを使った技術ですので、閲覧するブラウザが
JavaScriptに対応していないと機能しません。
バージョンが古いとか 対応していない場合もあります。
また 訪問者側で JavaScriptを読み込まない設定にしてあるケースも
あります。 そういったことも配慮しておきましょう。
|
