極意(6)マウスオーバー画像を極める


マウスオーバーとは

コンピュータの操作画面で、マウスカーソルを対象物の上に重ねると何らかの処理を行うこと。カーソルを対象物から離すと元の状態に戻るようになっていることが多い。
Webブラウザで、リンクが設定された文字列や画像にカーソルを重ねるとリンク先のアドレス(URL)が表示されるなど、対象物についての補助的な情報を表示するといった使い方が多い。(IT用語辞典「e-Words」より)


マウスオーバー画像の実例

前記のマウスオーバーの概念を画像に応用したのがマウスオーバー画像と呼ばれるものです。
理屈は簡単です。2枚の画像を用意して最初に表示されている画像の上にマウスを持っていくと、もう一枚の画像に切り替わる仕組みです。
言葉でいくら説明しても、なかなかご理解戴けないのが現実です。それならば、実例で体験して戴いた方が手っ取り早いと思い下記のページを紹介します。


マウスオーバー画像の利用

マウスカーソルが文字や画像の上に重なると、色や画像が変化する機能を「ロールオーバー」といいます。マウスオーバーとどう違うのか?
厳密に言うと違うのでしょうが、HPの世界では殆ど同意義と解釈して差し支えないと思います。そのロールオーバー画像もしくはマウスオーバー画像の利用方法について、いくつかの事例を紹介します。

QHMの編集機能には「白抜き文字」とか「蛍光ペン」とかの機能があります。それらの機能を利用した最も簡単なマウスオーバー画像を紹介します。
名づけて「簡易リンクボタン」と呼ぶことにしました。

Web上の画面遷移で良く使われるリンクボタン、例えば「トップ」、「戻る」、「前へ」、「次へ」等などの汎用的なリンクボタンが簡単に利用できるように公開してみました。
日頃、当サイトをご利用されているユーザーさまへのささやかなプレゼントです。利用して戴けると嬉しく思います。


ご意見箱