Rollover Image Engine JavaScript

ということで、とりあえずロールオーバーイメージを簡単に実装するための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>

ｊQuery用の設置コードは以下の通り
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:

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や開いているページへのリンクが付いている画像のときは画像を変えるなど。
• ループ処理の中で毎回同じ正規表現オブジェクトを生成しているので非効率。（っていうかしとけよって話ですよね。すぐできるんですが・・・）

• 前へ
• 次へ