今回は、ロールオーバーの設定を少し楽にするスクリプトを紹介したいと思います。
ロールオーバーとは、皆さん存知だと思いますが、ボタンをポイントしたことをユーザに分かりやすくするために、ボタンの画像を入れ替えるやつです。
方法は2通りあります。Javascriptで<img>タグにonmouseover/onmouseoutイベントを書く方法か、またはCSSでa:hoverを設定して実装する方法です。それぞれの特徴を表にしてみました。
| Javascript | CSS | |
|---|---|---|
| メリット |
|
|
| デメリット |
|
|
| マークアップ |
|
|
| SEO |
|
|
どちらも一長一短あり、Javascript版ではJavascriptを実行OFFの設定にしていると動作せず、CSS版では、CSS動作ONかつ画像表示OFFのときに何も表示されなくなり、displayやvisilityプロパティで非表示にすると音声ブラウザで読み上げられなくなるそうです。またプリントアウトしようと思ったときに、デフォルトが背景画像を印刷しない設定になってるブラウザも多く、ボタンのところが抜け落ちてしまう欠点があります。さらに、どちらにしても一個一個設定しないといけない面倒さがありますよね。
というわけで一番簡単で妥当な解決策として、ロールオーバーイベントを追加するスクリプトを作ってみました。
#あくまで「妥当」です。正統でも正解でもありません。
まず下のファイルをダウンロードしてください。
次に通常のボタン画像とロールオーバー画像を用意し、"button.gif"、"button_ro.gif"のように元ファイルに_roを付加した名前をつけます。そして、(X)HTMLには通常のボタン画像を普通に<img>タグで設置してください。そして(X)HTMLの<head> ～ </head>タグ内に
<script type="text/javascript" src="addevent_rollover.js" charset="UTF-8"></script>
という一行を追加してください。フォルダ分けされた複数ページで使う場合は、jsファイルの置き場所にあわせてsrc="addevent_rollover.js"の部分を修正してくださいね。
それだけで<a>タグに囲まれた<img>タグをリストアップし、ロールオーバー画像が存在するもののみ、onmouseover/onmouseoutイベントを追加します。ついでにPreload（データの先読み）もしてくれます。
もし画像名を自由に設定したい場合は、
<script type="text/javascript" src="addevent_rollover.js" charset="UTF-8"></script> <script type="text/javascript"> <!-- RO_PREFIX = ""; RO_SUFFIX = "_RO"; // --> </script>
というように、先ほどの(X)HTMLの<head> ～ </head>タグ内の記述に、RO_PREFIXとRO_SUFFIXの設定を追加してください。RO_PREFIXが元ファイル名の先頭に付く名前、RO_SUFFIXが元ファイル名の後ろに付く名前です。ご覧いただいて分かるように、デフォルトではRO_PREFIXが「」（なし）、RO_SUFFIXが「_RO」に設定されています。例えば、RO_PREFIXを「over_」、RO_SUFFIXを「」（なし）に設定すると、元ボタン名が「button.gif」の場合、「over_button.gif」を探しにいきます。
注意点として、RO_PREFIX/RO_SUFFIXの設定はスクリプトファイルを置いた場所より下に記述してください。直後でなくともかまいませんが、上においた場合はデフォルト設定が優先されます。
付け加えて、このスクリプトも欠点がないわけではなく、<a>タグ内の<img>タグで指定されたファイルをすべてチェックしに行きますので、ロールオーバー画像のないボタンが多い場合、サーバー側のエラーログに404 File not found.エラーが沢山残ります。
それ自体が即問題となるわけではありませんが、不要なエラーを残すのもあまりスマートではないかもしれません。後ほど、それに対する対策を入れたスクリプトも作ってみようかと思います。ただその場合、<img>タグにロールオーバーをつけるつけないの設定が必要になりますので、一個一個設定する手間は必要になります。
そういえば余談ですが、たまーに「オンマウス」って略す方を見かけます。でも、なんだか変ですよぅ。on mouseで切っちゃうと、「マウスの上」ということになり、それはなに？ということになりますです。例えば"your hand on a mouse."（マウスの上においた手）という文章を考えてみると良く分かると思います。それともこれの親戚かしらん？
コメントする