Image Rollover Engine 3.1を公開

カテゴリ: JavaScript / 公開日: 2009年8月02日(日曜)04:44 / 投稿者: Tom Goodsun

こんにちは。細々といろいろやってます。Goodsunです。

以前Rollover Image Engine 3.0というのを公開しました。それのチューニングを行った3.1の公開です。

名前が変わっていますね。どうやら海外では「IMAGE ROLLOVER」と表現するのが一般的で、公開直後に失敗したと思いましたが、今回から気をつけていこうと思います。旧バージョンの名前を変える気はありませんので、コチラを使ってください。

See DEMO

こいつですが、以前から気になっていたある点だけを修正したものになりますので、機能的になにがどうなったとかはありません。

  • ループ処理内で発生する共通の正規表現をループ前に定義した。

これだけです。

設置の仕方は以前のものと同じです。なんたって基本的な仕組みは変わってませんから。こちらを参照(Rollover Image Engine 3.0)

再びメリットをまとめてみました。

  • prototype.js、jQuery、MooToolsそれぞれに対応したスクリプトを用意。
  • 指定どおりに画像を配置するとロールオーバーを自動作成できる。
  • HTMLのコード量が少なくなり、HTMLコード自体が見やすくなる。
  • 画像をクリックした時に、その画像を変えることができる。(CSS擬似セレクタの:activeに相当)

デメリットは以下の通りでしょうかね。。。

  • 単独では動作しない(コアライブラリが必要)。
  • 画像ディレクトリの設定が指定されているので、自由度はない。(意味がある分け方なので、さほど問題ではないと思うが。。。)

最近思っているのですが、このスクリプトの懸念事項として、内部で生成している配列のインデックスを画像ファイル名にしていることなんです。通常紹介されているものは、画像にname属性を指定するパターンがよく見受けられます。これで作っておくとその画像要素特定のロールオーバーになるため、安定はするでしょうね。またこのImage Rollover Engineのように画像の名前で配列を作っておくと、使用するメモリ領域(?)は節約されるでしょう。

なにはともあれ、今後の課題は以下のようになっています。

  • 表示中のページへのリンクを設定された画像の変更
  • visitedリンクに対する画像の変更

ぐらいでしょうか。

使用に関しては自己責任でお願いします。バグ等ありましたら、連絡してやってください。