Rollover Image Engine JavaScript

カテゴリ: JavaScript / 公開日: 2009年6月02日(火曜)23:26 / 投稿者: Tom Goodsun

ということで、とりあえずロールオーバーイメージを簡単に実装するためのJavaScriptを作ってみました。検索してみましたけど、こういうのってあんまりないみたいですね。

ロールオーバーイメージの作り方とかがでてくるみたいですが。

私が個人的に作って、このサイトでも配布してたかも知れませんが、とりあえずバージョン3.0ってことで配布させてもらいます。(バージョン管理をしっかりしろ!)
This is a script I made and I may have distributed but forgot. And I release this as Version 3.0.

イベントのとり方とかDOMの操作とか、自前で作ると面倒くさいので、今回はすべてライブラリを使って作りました。安心してください。prototype.js、jQuery、MooToolsに対応させました。目的に合わせて選んでください。ということで以下からダウンロードしてください。
So I want to be away from troubles like event handling and DOM operation, I created these scripts based on major three JavaScript libraries like prototype.js, jQuery and MooTools at this time. Please select as you like and download from the following links.

Rollover Image Engine JS Version 3.0 for prototype.js
Rollover Image Engine JS Version 3.0 for jquery.js
Rollover Image Engine JS Version 3.0 for mootools.js

画像ディレクトリに3つディレクトリを作り、マウスオーバーしたとき用(over)、マウスアウトしたとき用(out、デフォルトはこれ)、クリックされたとき用(active、オプションなので任意で作成してください)とします。そして同じファイル名でそれぞれのディレクトリにファイルを格納します。最初に表示しておくのはマウスアウトしたとき用の画像にしてください。
Make three directories which have the images on mouseover, on mouseout (you should write img tags for rollover with images in this directory in your HTML) and on click. Place your images with the same name in each directory.

prototype.jsの設置コード以下の通り
For prototype.js is below:

<script type="text/javascript" src="/./prototype.js"></script>
<script type="text/javascript" src="/./rollover.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
    RolloverImageEngine.initialize({
        roElements: ".rollover img",
        onOverName: "mouseover",
        onOutName: "mouseout"
    });
});
</script>

jQuery用の設置コードは以下の通り
For jQuery is below:

<script type="text/javascript" src="/./jquery.js"></script>
<script type="text/javascript" src="/./rollover.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    RolloverImageEngine.initialize({
        roElements: ".rollover img",
        onOverName: "mouseover",
        onOutName: "mouseout"
    });
});
</script>

MooTools用の設置コードは以下の通り
For MooTools is below:

<script type="text/javascript" src="/./mootools.js"></script>
<script type="text/javascript" src="/./rollover.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
    RolloverImageEngine.initialize({
        roElements: ".rollover img",
        onOverName: "mouseover",
        onOutName: "mouseout"
    });
});
</script>

initialize()メソッドの引数に設定できるオプションは以下の通り。
Options that set in argument for initialize() method are below:

オプション名
Options
デフォルト値
Default Values
説明
Descriptions
imageClassName "rollover" ロールオーバーさせるimg要素に指定されているクラス属性値。逆に言えばこの値がクラス属性に設定されているimgタグはロールオーバーする。
Value of class attribute in img tags for rollover.
onOverName "over" マウスオーバーしたときに表示する画像が格納されているディレクトリ名。
Directory name that the images are shown when mouse is above.
onOutName "out" マウスアウトしたときに表示する画像が格納されているディレクトリ名(imgタグのsrcにはこの画像ディレクトリ内の画像を設定してください)。
Directory name that the images are shown when mouse is out of.
onActiveName "active" マウスをクリックしたときに表示する画像が格納されているディレクトリ名。この内部ではactiveOptionと呼称しています。
Directory name that the images are shown when mouse is clicked on. This option is called 'activeOption' in this script.
activeOptionName "roi-active" activeOptionを適用するimg要素に指定されているクラス属性値。この値がクラス属性に設定されているimgタグはクリックしたときに画像を変更する。よってこれは任意となっている。
Value of class attribute in img tags which is applied when activeOptions is set. This is optional value.
reverseActive false 上記で指定した要素をactiveOptionの対象外とし、それ以外を対象にするフラグ。この設定を有効にするにはtrueを設定する。
Apply activeOption to rollover img elements that activeOption value is not set. Set 'true' to enable this option.

HTMLには以下のように記述します。imgタグにのみ影響しますので、aタグやdivタグは別に関係ありません。
Write img tags in HTML like below:

<a href="#"><img src="/./images/ro/mouseout/home.png" width="73" height="23" class="ro" /></a>
<a href="#"><img src="/./images/ro/mouseout/about.png" width="81" height="23" class="ro roi-active" /></a>
<a href="#"><img src="/./images/ro/mouseout/blog.png" width="67" height="23" class="ro" /></a>
<a href="#"><img src="/./images/ro/mouseout/download.png" width="118" height="23" class="ro" /></a>
<a href="#"><img src="/./images/ro/mouseout/column.png" width="94" height="23" class="ro" /></a>
<a href="#"><img src="/./images/ro/mouseout/bookmarks.png" width="123" height="23" class="ro roi-active" /></a>
<a href="#"><img src="/./images/ro/mouseout/contact.png" width="104" height="23" class="ro" /></a>

ということで、デモをご覧ください。この場合「ABOUT」と「BOOKMARKS」はクリック時に画像が変わります。
And then, let's see the demo three type of Rollover Image Engine JS Version 3.0. Demo shows the change of the images of 'ABOUT' and 'BOOKMARKS' when these are clicked.

Rollover Image Engine JS Version 3.0 DEMO

その他注意点、改善点的なもの

  • 今まで、イベント発生時に単にパスの特定の部分を置換するだけだったが、今回はあらかじめImageオブジェクトを生成して、配列に格納するようにした。これの利点はImageオブジェクトが生成され、画像パスがsrcにセットされた時点で、画像がダウンロードされるため、やや正しい処理になっている(と思う)。イベント時に画像が一瞬空白になったりはしないはず。
  • 上記のような理由で配列にデータを保持しているわけだが、配列のインデックスは画像のファイル名でつけている。
  • 元々MooToolsベースで作っていたため、若干それっぽい形のスクリプトになっている。
  • ライブラリを使ったので、思いのほかコードが短くなった。(100行も書いてない)
  • 大きなサイトでの使用実績はないので、そこでの挙動がわからない。

今後の課題

  • CSSの擬似セレクタみたいにリンクのvisitedや開いているページへのリンクが付いている画像のときは画像を変えるなど。
  • ループ処理の中で毎回同じ正規表現オブジェクトを生成しているので非効率。(っていうかしとけよって話ですよね。すぐできるんですが・・・)