前回で左ナビゲーションのボタンの色を変更いたしました。
その時ついでに、マウスオーバーでナビゲーションボタンの色を変更するようにしました。
マウスオーバーで画像を変更させると言うのは色々な方法があるのですが、いずれも面倒なところがあり、厄介です。
今回、超手軽に出来る画像ロールオーバースクリプトを作成しましたので、ご紹介させていただきます。
この画像ロールオーバースクリプトを使うには、ほんの少しだけ条件があります。
- 元の画像ファイル名が「xxx.jpg」である場合、ロールオーバー時の画像ファイル名は「xxx_hover.jpg」としなければなりません。
（ただし、「_hover」の部分は変更することができます）
- 元の画像と、ロールオーバー時の画像は、同じフォルダに入っていなければなりません。
- 元の画像と、ロールオーバー時の画像は、同じ拡張子でなければなりません。
- javascriptを用いるので、javascriptがオフになっているブラウザでは効果が現れません。
制限はこの程度です。深く考えずにできると思います。
では、利用方法です。
- まずは、以下のファイルをダウンロードしてください。
jscript_roll_over_image.js
クリックして表示されるプログラムをコピーしてtextファイルとして同じ名前で保存してもいいですし、リンクを右クリックして保存してもいいです。
- ロールオーバー後の画像に挿入する文字列「_hover」を変更したい場合は、「jscript_roll_over_image.js」ファイルをテキストエディタで開き、1行目の
var insert_str = '_hover';
の「_hover」の部分を好きな文字列に変えて、保存してください。
- 「jscript_roll_over_image.js」を、皆さんのwebページ上の適当なところにアップロードしてください。
- 画像をロールオーバーさせたいhtmlファイルの<head>タグ内に、以下の内容を挿入してください。
<script type="text/javascript" src="jscript_roll_over_image.js"></script>
「jscript_roll_over_image.js」がhtmlファイルより1階層上にある場合は、
<script type="text/javascript" src="../jscript_roll_over_image.js"></script>
とするなどしてください。
- ロールオーバーさせたい画像の<img>タグの中を、以下のようにしてください。
<img src="sample.jpg" alt="サンプル" onmouseover="roll_over_image(this,1)" onmouseout="roll_over_image(this,0)" />
画像の内容によって変更させる必要はありません。ただただ<img>タグ内に赤文字部分を呪文のように挿入していってください。
注意すべき点としては、<a>タグに挿入するのではなく、<img>タグに挿入すると言うことです。
<a>タグに挿入してもロールオーバーにはなりません。改良すればできるようになると思いますが、<a>タグがなくてもロールオーバーが出来ることが利点の一つなので、<img>タグに入れるようにしたほうがいいと思います。
- あとは、ロールオーバー前の画像とロールオーバー後の画像をアップロードするだけです！
最後になりましたが、弊店Webページを見ていただいて、上記スクリプトのバグをご指摘いただいた「チャーガ茶屋」のかずさん。本当にありがとうございました。
追記（2007年4月25日 15:10）
1箇所バグがありましたので修正いたしました。上記時間までにスクリプトをダウンロードされた方は、必ず新しいスクリプトをダウンロードしなおしてご利用下さい。
« 文章を隠す